uniapp 区分环境
uniapp 区分环境的方法
在 uniapp 中，可以通过多种方式区分开发环境、测试环境和生产环境。以下是几种常用的方法：
使用 process.env.NODE_ENV
uniapp 基于 Vue 和 Webpack，可以通过 process.env.NODE_ENV 获取当前环境。通常在开发环境下值为 development，生产环境下为 production。
if (process.env.NODE_ENV === 'development') {
console.log('开发环境');
} else if (process.env.NODE_ENV === 'production') {
console.log('生产环境');
}配置 manifest.json
在 manifest.json 文件中，可以通过自定义条件编译来区分环境。
{
"app-plus": {
"distribute": {
"android": {
"debug": "开发环境配置",
"release": "生产环境配置"
}
}
}
}使用条件编译
uniapp 支持条件编译，可以通过 #ifdef 和 #ifndef 区分不同平台或环境。
// #ifdef H5
console.log('H5 环境');
// #endif
// #ifdef MP-WEIXIN
console.log('微信小程序环境');
// #endif自定义环境变量
在项目根目录下创建 .env 文件，定义不同环境变量。
# .env.development
VUE_APP_ENV = development
API_BASE_URL = https://dev.example.com# .env.production
VUE_APP_ENV = production
API_BASE_URL = https://api.example.com在代码中通过 process.env.VUE_APP_ENV 访问。
console.log(process.env.VUE_APP_ENV);
console.log(process.env.API_BASE_URL);动态配置
可以通过在 main.js 中动态设置全局变量来区分环境。
let baseUrl;
if (process.env.NODE_ENV === 'development') {
baseUrl = 'https://dev.example.com';
} else {
baseUrl = 'https://api.example.com';
}
Vue.prototype.$baseUrl = baseUrl;注意事项
- 使用
process.env时需确保项目配置正确，部分打包工具可能需要额外配置。 - 条件编译仅适用于 uniapp 支持的平台，无法直接用于自定义环境区分。
- 自定义环境变量需以
VUE_APP_开头，否则可能无法被识别。
以上方法可根据实际需求选择使用，通常结合 process.env 和自定义环境变量能够满足大多数场景。
