uni-app中process.env.NODE_ENV不够用,因其仅提供development和production两个固定值,无法区分test、staging等多环境;且该变量为构建时注入的常量,不支持运行时切换,必须使用以VITE_开头的环境变量配合import.meta.env在构建时动态注入。

uni-app 不能靠运行时判断 location.hostname 或手动改 baseUrl 来切环境,那样在小程序和 App 平台必然报错,且上线前极易漏改。
为什么 process.env.NODE_ENV 在 uni-app 里不够用
uni-app 默认只暴露 development 和 production 两个值,但实际项目常需 test、staging、preprod 等更多环境。直接读取 process.env.NODE_ENV 会丢失区分能力,比如测试服和预发服都走 production,就只能硬编码或加额外判断——这违背配置与代码分离原则。
更关键的是:这个变量是构建时注入的常量,打包后不可更改。你在微信开发者工具里点“重新编译”,它不会刷新;你改了 .env 文件但没重新 build,代码里读到的还是旧值。
- 真正生效的时机是执行
npm run build:mp-weixin或npm run dev:h5这类命令时 - Vite(uni-app 3.0+ 默认)只认以
VITE_开头的环境变量,.env.development中写API_URL=xxx是无效的 - 微信小程序平台不支持
process.env注入到逻辑层(如uni.request调用处),必须通过import.meta.env读取
正确做法:用 VITE_API_BASEURL + import.meta.env 替代手写 if-else
在项目根目录新建 .env.development、.env.test、.env.production,内容示例:
## .env.test VITE_API_BASEURL = "https://test-api.example.com" VITE_APP_TITLE = "测试版 MyApp"
然后在任意 JS/TS 文件中这样用:
const baseUrl = import.meta.env.VITE_API_BASEURL;
uni.request({
url: `${baseUrl}/login`,
// ...
});
注意三点:
- 所有环境变量必须以
VITE_开头,否则 Vite 不会注入到客户端代码中 - 不要在
manifest.json或vue.config.js里引用这些变量——它们只在构建时可用,而 manifest 是静态 JSON,vue.config.js 是 Node 环境运行,两者读取方式不同 - 如果同时支持多平台(如 H5 + 小程序),别把 H5 的代理逻辑和小程序的域名混在一起写;小程序必须填真实合法域名,H5 才能用 proxy
H5 跨域代理和小程序合法域名是两套机制,不能互相替代
开发 H5 时配 manifest.json 里的 proxy,是为了绕过浏览器同源策略;但这个配置对小程序完全无效——小程序的网络请求走的是微信客户端底层,不经过本地 devServer,也不识别 proxy 字段。
所以常见错误是:
- 以为在
manifest.json里配了"target": "http://192.168.1.100:8080",小程序就能连内网地址——不行,必须填公网合法域名 - 把 H5 的
/api代理规则照搬到小程序,结果请求发到了https://yourdomain.com/api/login,但后端根本没挂这个路径 - 上线前忘了去微信公众平台「开发管理 > 开发设置 > 服务器域名」里添加
request合法域名,导致真机白屏或 404
正确分工是:
- H5 开发阶段:用
proxy+pathRewrite把/api映射到测试接口 - 小程序开发阶段:用
import.meta.env.VITE_API_BASEURL指向已备案的测试域名(如https://test-api.example.com),并确保该域名已在后台配置为合法 request 域名 - App 打包时:直接使用真实 IP 或域名,不走任何代理,因为原生容器无跨域限制
多地区 + 多平台 + 多环境的真实配置链路
当你要为江苏、安徽、吉林三省分别打包微信小程序正式版,且每省后端网关地址不同,就不能只靠 VITE_API_BASEURL ——你需要组合维度:district(地区)、uni_platform(平台)、deploy(部署环境)。
推荐方案是用 cross-env 注入启动参数,再配合 prebuild.js 动态生成配置文件:
cross-env district=jiangsu uni_platform=mp-weixin deploy=prod npm run build:mp-weixin
这样做的核心价值在于:所有环境差异收敛到构建命令里,业务代码里永远只写 import.meta.env.API_GATEWAY,不用关心它从哪来。
容易被忽略的一点是:微信小程序的「上传」动作本身不触发重新构建。如果你在开发者工具里点「上传」,但上次 build 是用 deploy=test 打的包,那上传的就是测试环境配置——必须确认当前产物确实是按目标环境 build 出来的。











