uniapp H小程序、APP端自定义不同运行环境(开发、测试、生产)、自定义条件编译平台、以及动态修改manifest.json值讲解
在uni-app中,可以通过condition
编译条件来实现不同环境下的自定义条件编译。
- 在
manifest.json
中配置编译条件:
"condition": {
"current": 0, // 当前生效的编译条件的索引
"list": [
{
"name": "开发环境",
"API_BASE_URL": "https://dev.example.com",
"condition": {
"#ifdef H5": {
"UA": "Development-H5"
},
"#ifdef MP-WEIXIN": {
"UA": "Development-WeChat"
},
// ...其他小程序平台
"#ifdef APP-PLUS": {
"UA": "Development-APP"
}
// ...其他APP条件
}
},
{
"name": "测试环境",
"API_BASE_URL": "https://test.example.com",
"condition": {
"#ifdef H5": {
"UA": "Test-H5"
},
// ...其他条件
}
// ...其他环境配置
},
// ...更多环境配置
]
}
- 在代码中使用条件编译变量:
// 示例:根据不同环境设置API基础路径
const baseUrl = process.env.VUE_APP_API_BASE_URL || '';
// 示例:根据不同环境设置用户代理字符串
const userAgent = process.env.VUE_APP_UA || 'Default-User-Agent';
// 使用环境变量进行API请求或其他逻辑处理
- 在
vue.config.js
中配置环境变量:
// 根据不同的编译条件设置不同的环境变量
const env = require('./env.js');
module.exports = {
// ...其他配置
configureWebpack: {
// 通过cross-env设置环境变量
// 例如:"cross-env UNI_PLATFORM=mp-weixin UNI_ENV=prod"
define: {
'process.env': env[process.env.UNI_PLATFORM] || env['development']
}
}
};
- 创建
env.js
文件定义不同环境下的变量:
module.exports = {
'development': {
'NODE_ENV': '"development"',
// ...其他变量
},
'production': {
'NODE_ENV': '"production"',
// ...其他变量
},
// ...其他平台的环境变量
};
通过以上步骤,可以在uni-app项目中根据不同的编译条件配置不同的环境变量和运行时条件编译。在代码中,可以通过process.env
访问这些环境变量,实现不同环境下的逻辑分流。
评论已关闭