启动Vite开发服务器时出现import.meta相关语法错误求助

错误原因 #

你遇到的报错是因为import.meta.dirname、import.meta.filename、import.meta.url是ES模块专属语法，但你的vite.config.js被Node.js当作CommonJS模块解析了，CommonJS环境不支持import.meta相关属性，导致esbuild抛出语法错误，进而无法加载配置文件。

解决方法 #

方法1：将配置文件转为ES模块 #

有两种方式可以让Vite识别配置文件为ES模块：

• 修改package.json：在项目根目录的package.json中添加"type": "module"，所有.js文件会默认以ES模块方式加载：

  {
    "type": "module"
  }
  

• 重命名配置文件：把vite.config.js改名为vite.config.mjs，明确标记这是ES模块文件，无需修改package.json。

方法2：改用CommonJS兼容写法 #

如果不想切换到ES模块，将配置文件改为CommonJS语法，用Node.js内置的__dirname、__filename替代import.meta属性：

const path = require('path');

module.exports = {
  // 示例：用__dirname替代import.meta.dirname配置路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  // 其他Vite配置项
}

额外注意事项 #

• 确保Node.js版本在v14.18.0或v16.0.0以上，低版本对ES模块的支持不完善。
• 配置文件中避免混用ES模块（import）和CommonJS（require）语法，保持语法一致。

内容的提问来源于stack exchange，提问作者Rajdeep B