Vue项目中没有设置process.env但是还是可以获取到的原因分析及解决方案
作者：清风细雨_林木木
虽然没有在 Vue 项目中显式设置 process.env,但依然能获取到一些 process.env.xxx是因为Vue CLI 或 Vite 在构建时自动注入了环境变量,本文给大家分享解决方案,感兴趣的朋友一起看看吧
虽然没有在 Vue 项目中显式设置 process.env，但依然能获取到一些 process.env.xxx，是因为：
原因：Vue CLI 或 Vite 在构建时自动注入了环境变量
Vue CLI 项目（使用 webpack）
Vue CLI 默认会在构建过程中注入所有以 VUE_APP_ 开头的 .env 变量，还有几个内建变量：
process.env.NODE_ENV：当前构建环境（如development、production），始终可用process.env.BASE_URL：基础路径process.env.VUE_APP_*：你自定义的变量（例如：VUE_APP_API_URL）
Vite 项目
Vite 的环境变量行为稍有不同：
.env中的所有变量会自动注入import.meta.env中- 但只有以
VITE_开头的变量才会暴露到客户端代码中
# .env VITE_API_URL=https://api.example.com
在代码中：
// 对于 Vue + Vite 项目 console.log(import.meta.env.VITE_API_URL);
为什么还能用 process.env？
在 Vite 项目中，Vite 会模拟 process.env.NODE_ENV 供部分工具兼容，你可能还能访问：
console.log(process.env.NODE_ENV); // 'development' | 'production'
但其他自定义变量不会自动挂载到 process.env 中。
如何正确使用？ Vue CLI：
VUE_APP_API_URL=https://example.com
console.log(process.env.VUE_APP_API_URL);
Vite：
VITE_API_URL=https://example.com
console.log(import.meta.env.VITE_API_URL);
📌 总结
| 构建工具 | 环境变量写法 | 获取方式 |
|---|---|---|
| Vue CLI | VUE_APP_ | process.env.VUE_APP_XXX |
| Vite | VITE_ | import.meta.env.VITE_XXX |
| 内建变量 | NODE_ENV | 都能访问到（Vite 模拟） |
到此这篇关于Vue项目中没有设置process.env但是还是可以获取到的原因分析及解决方案的文章就介绍到这了,更多相关Vue没有设置process.env但是还是可以获取内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！