Vue3项目创建后运行npm run dev报错：Expected identifier but found 'import'

看起来你遇到的是Vite配置文件中ES模块语法解析的兼容性问题——虽然你完全没修改默认生成的代码，但你的环境触发了这个语法错误。我来帮你一步步排查解决：

1. 检查package.json是否启用ES模块 #

Node.js默认会把未声明"type": "module"的项目当作CommonJS模块处理，而import.meta.url是ES模块独有的语法，这就会导致解析报错。

打开项目根目录的package.json，确认是否存在"type": "module"字段：

{
  "name": "testvue3",
  "type": "module", // 这个字段必须存在
  "version": "0.0.0",
  // 其他现有字段...
}

如果没有这个字段，直接添加到最外层（和name、version同级）即可。

2. 删除多余的Vite配置文件 #

从报错信息可以看到，Vite尝试加载的是vite.config.mjs，但你提供的正确配置文件是vite.config.ts。请检查项目根目录：

• 如果同时存在vite.config.mjs文件，直接删除它
• 确保只有vite.config.ts这一个Vite配置文件

这样Vite就能加载正确的TypeScript配置文件，而不是错误的mjs文件。

3. 更新Vite及相关插件到最新版本 #

你的Node.js版本（22.10.0）是较新的版本，可能和旧版Vite存在兼容性问题。执行以下命令更新所有Vite相关依赖：

npm install vite@latest @vitejs/plugin-vue@latest vite-plugin-vue-devtools@latest --save-dev

更新完成后，再尝试运行npm run dev。

4. 确认tsconfig.json的模块配置 #

打开项目根目录的tsconfig.json，检查compilerOptions中的module字段是否设置为支持ES模块的版本：

{
  "compilerOptions": {
    "module": "ESNext", // 或ES2020及以上版本
    // 其他现有配置...
  }
}

这个配置确保TypeScript编译时能正确识别import.meta.url这类ES模块语法。

最后尝试重置依赖 #

如果上面的步骤都没解决问题，可以尝试完全重置依赖：

1. 删除项目根目录的node_modules文件夹
2. 删除package-lock.json文件
3. 重新执行npm install安装依赖
4. 再次运行npm run dev

备注：内容来源于stack exchange，提问作者Brice Mabillard