uniapp配置自定义环境变量和条件编译变量
- 1、使用vue.config.js配置环境变量
- 2、使用
.env文件配置环境变量 - 3、使用 package.json配置环境变量
vue.config.js和.env在vue项目中使用非常频繁了这里就不再多说,主要介绍使用package.json来配置环境变量和条件编译变量
首先在根目录下创建package.json文件,参考官方demo如下配置:
提示
注意:package.json文件不能含有任何注释,否则会编译失败
{
"uni-app": {
"scripts": {
"dev-env": {
"title":"测试环境",
"env": {
"UNI_PLATFORM": "h5",
"ENV_PARAMS": "dev",
"other": ""
},
"define": {
"DEV_PLATFORM": true
}
},
"pro-env": {
"title":"发布环境",
"env": {
"UNI_PLATFORM": "h5",
"ENV_PARAMS": "pro",
"other": ""
},
"define": {
"PRO_PLATFORM": true
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
在scripts下可配置多个环境以及相应的名称、环境变量参数等,配置后即可在代码中使用ENV_PARAMS等环境变量
if (process.env.ENV_PARAMS === 'dev') {
// 测试环境
} else if(process.env.ENV_PARAMS === 'pro') {
// 发布环境
}
1
2
3
4
5
2
3
4
5
同时我们也可以配置define字段,该字段中配置的变量可用于条件编译使用,比如上面配置的DEV_PLATFORM和PRO_PLATFORM参数
// #ifdef DEV_PLATFORM
// 测试环境操作
// #endif
// #ifdef PRO_PLATFORM
// 发布环境操作
// #endif
1
2
3
4
5
6
2
3
4
5
6
需要注意的是以上配置的环境变量和条件编译在本地运行环境是不生效的,需要在运行 > 对应环境 或发行 > 自定义发行中可以看到对应的配置的环境,点击对应环境运行或打包后的代码才能使用以上配置

上次更新: 2025/09/05, 8:09:00