Vite环境变量终极对决：define 与 import.meta.env，如何明智选择？
你是否在Vite项目中反复纠结：该用
define还是import.meta.env？配置一错，API地址暴露、版本号泄露，甚至导致线上崩溃。别慌！今天，我用3年实战经验，带你彻底拆解这两者的底层逻辑，帮你避开80%的环境变量坑。
一、环境变量的“双生子”：Vite的两种方式
在Vite的世界里，环境变量是配置的基石。但Vite巧妙地提供了两种截然不同的机制：
import.meta.env：Vite内置的运行时环境访问器，通过.env文件定义，以VITE_开头的变量自动注入。define：通过插件（如vite-plugin-define）实现的构建时代码替换，在打包前直接替换代码中的字符串。
✨ 重点：
import.meta.env是Vite官方推荐的首选，而define更像“高级玩家”的补丁工具。
二、import.meta.env：运行时的“安全卫士”
为什么它更优？
- 运行时可用：变量在浏览器中实时生效（如切换环境时无需重新构建）。
- 安全隔离：仅暴露以
VITE_开头的变量（如VITE_API_URL），避免敏感信息泄露。 - 自动注入：Vite会自动将
.env文件中的变量注入到import.meta.env。
常见用法 & 案例
# .env.development VITE_API_URL="https://dev.api.com" VITE_ENABLE_DEBUG=true// 在代码中直接使用constapiUrl=import.meta.env.VITE_API_URL;// "https://dev.api.com"constisDebug=import.meta.env.VITE_ENABLE_DEBUG;// true// 用于条件渲染if(import.meta.env.MODE==='production'){console.log('生产环境，禁用调试');}💡最佳实践：所有动态配置（API地址、功能开关）都用它。比如切换开发/生产环境时，无需修改代码，只需改
.env文件。
三、define：构建时的“代码魔术师”
适用场景
- 静态常量：如版本号、编译时的标志位（不会在运行时变化）。
- 避免运行时开销：某些库要求常量必须在编译时确定。
配置与用法
// vite.config.jsimport{defineConfig}from'vite';import{vitePluginDefine}from'vite-plugin-define';// 需要安装插件exportdefaultdefineConfig({plugins:[vitePluginDefine({__APP_VERSION__:JSON.stringify('1.0.0'),// 构建时替换__IS_DEV__:JSON.stringify(process.env.NODE_ENV==='development')})]});// 在代码中使用console.log(`当前版本:${__APP_VERSION__}`);// 1.0.0if(__IS_DEV__){console.log('开发模式，启用热更新');}⚠️致命陷阱：
- ❌不要用
define暴露API密钥！构建后，__APP_VERSION__直接变成字符串，客户端代码中可见。- ❌避免在运行时修改：
define是静态替换，无法像import.meta.env那样动态切换。
四、深度对比：场景化选择指南
| 场景 | 推荐方案 | 原因 |
|---|---|---|
| 配置API地址（开发/生产） | import.meta.env | 需要运行时切换，且避免暴露真实地址 |
| 版本号、编译标志 | define | 静态值，无需运行时动态变化，减少代码冗余 |
| 功能开关（如A/B测试） | import.meta.env | 可在不重新构建的情况下，通过.env文件实时调整 |
| 敏感信息（密码/密钥） | 禁止使用两者 | 用Vite的env安全机制：通过服务端注入，或使用vite-plugin-dotenv插件加密 |
💡关键结论：
90%的场景，import.meta.env是唯一正确答案。只有在必须替换代码字符串（如if (process.env.NODE_ENV === 'production')）时，才考虑define。
五、实战避坑：我的血泪教训
上周，我一个团队的项目因错误使用define导致生产环境API地址泄露。
错误写法：
// 错误！用define暴露了API地址define:{__API_URL__:JSON.stringify('https://prod.api.com')}后果：客户端代码直接包含API地址，被爬虫抓取，引发安全事件。
正确做法：
# .env.production VITE_API_URL="https://prod.api.com"// 安全！通过import.meta.env获取constapi=import.meta.env.VITE_API_URL;六、总结与进阶思考
- 核心原则：
import.meta.env用于运行时配置，define用于构建时常量。 - 避坑口诀：
VITE_前缀的变量用import.meta.env，否则用define（但尽量少用）。