启动Vite+React项目时遇import.meta语法错误求助

问题原因 #

你在vite.config.js的define配置项中错误地直接引用了import.meta.dirname、import.meta.filename或import.meta.url这类表达式，没有将它们作为字符串键名包裹起来。Vite的define需要以字符串形式声明要替换的全局变量，直接写表达式会被esbuild当作JS代码解析，从而抛出语法错误。

修复步骤 #

1. 打开项目根目录下的frontend/vite.config.js文件
2. 找到define配置块（如果没有则检查是否有类似的全局变量注入代码）
3. 将所有import.meta.*相关的键名用引号包裹，示例如下：

错误写法：

export default defineConfig({
  define: {
    import.meta.dirname: '__dirname',
    import.meta.filename: '__filename',
    import.meta.url: 'import.meta.url'
  }
})

正确写法：

export default defineConfig({
  define: {
    'import.meta.dirname': JSON.stringify(__dirname),
    'import.meta.filename': JSON.stringify(__filename),
    'import.meta.url': 'import.meta.url'
  }
})

4. 保存文件后重新执行npm run dev

补充说明 #

• 如果你的Vite配置文件是CommonJS格式（即vite.config.cjs），确保使用module.exports而非export default
• 若不需要这些import.meta相关的全局变量，直接删除对应配置项即可解决问题

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