如何在Vite中指定DEV/PROD模式？构建后状态异常求解

核心说明 #

import.meta.env.PROD和DEV是Vite自动生成的内置变量，无法通过.env文件手动修改，它们的取值只由Vite的运行场景决定：

• 运行开发服务器（vite dev或vite命令）时：DEV=true，PROD=false
• 执行生产构建（vite build命令）时：PROD=true，DEV=false

你的问题原因分析 #

你执行npm run build却得到DEV=true、PROD=false，大概率是package.json中的build脚本配置错误，比如误写成了启动开发服务器的命令（如vite或vite dev），而非vite build。

解决步骤 #

1. 检查package.json的脚本配置
   打开项目根目录的package.json，确认scripts中的build命令是vite build，正确配置示例：

   {
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "preview": "vite preview"
     }
   }
   

2. 直接执行原生构建命令测试
   如果脚本配置正确但问题依旧，跳过npm脚本，直接在终端执行：

   npx vite build --mode production
   

   查看此时import.meta.env的输出是否正常。
3. 关于--mode参数的误区
   --mode参数仅用于设置import.meta.env.MODE的值，不会改变PROD和DEV的取值。比如你自定义staging模式，执行vite build --mode staging时，PROD=true、DEV=false、MODE=staging依然成立。

注意事项 #

不要尝试在.env文件中设置PROD=true或DEV=false，Vite会忽略这些手动配置，因为这两个变量属于Vite内置的特殊环境变量，优先级最高。

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