uniapp 区分环境
区分开发与生产环境
在uniapp中可以通过process.env.NODE_ENV判断当前环境。开发环境下值为development,生产环境下值为production。这种方式适用于H5平台。
if (process.env.NODE_ENV === 'development') {
console.log('开发环境');
} else {
console.log('生产环境');
}
使用条件编译
通过uniapp的条件编译特性,可以针对不同平台编写特定代码。语法格式为// #ifdef和// #endif。
// #ifdef H5
console.log('当前是H5平台');
// #endif
// #ifdef MP-WEIXIN
console.log('当前是微信小程序平台');
// #endif
配置多环境变量
在项目根目录创建.env文件管理环境变量,不同环境使用不同后缀:
.env.development开发环境.env.production生产环境
文件内容示例:
VUE_APP_API_BASE = https://dev.api.example.com
代码中通过process.env.VUE_APP_API_BASE访问变量值。
动态配置接口地址
结合环境变量和条件编译,可以实现动态接口配置:
let baseURL;
// #ifdef H5
baseURL = process.env.VUE_APP_API_BASE;
// #endif
// #ifdef MP-WEIXIN
baseURL = 'https://wx.api.example.com';
// #endif
打包时指定环境
在package.json中配置不同环境的打包命令:
"scripts": {
"build:prod": "uni-build --mode production",
"build:dev": "uni-build --mode development"
}
运行npm run build:prod将使用生产环境配置打包。
小程序环境判断
微信小程序中可使用wx.getAccountInfoSync()获取环境信息:
const accountInfo = wx.getAccountInfoSync();
console.log(accountInfo.miniProgram.envVersion);
// 返回值:develop(开发版)、trial(体验版)、release(正式版)
注意事项
H5平台的环境变量需要以VUE_APP_开头才能被正确识别。不同平台的环境判断方式可能有所差异,建议结合条件编译使用。生产环境打包前务必检查所有环境相关配置是否正确。







