HbuilderX配置自定义打包环境
在web开发时，往往需要把一套代码编译到不同环境，在webpack等环境下我们可以通过设置不同环境变量来实现。但在使用HbuilerX开发时中我们只能借助该工具自带的打包环境进行打包不能自定义环境，不过HbuilderX也提供了自定义环境的相关配置，详情见uniapp属性
以h5开发为例，在package.json中添加如下配置：
{
// xxx
"uni-app": {
"scripts": {
"build:test": {
"title":"测试环境",
"env": {
"UNI_PLATFORM": "h5",
"CUSTOM_ENV": "test"
},
"define": {
"H5-TEST": true
}
},
"build:prod": {
"title":"正式环境",
"env": {
"UNI_PLATFORM": "h5",
"CUSTOM_ENV": "prod"
},
"define": {
"H5-PROD": true
}
}
}
}
// xxx
}
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
- 配置后可在菜单发行>自定义发行中找到上面配置的
测试环境和正式环境菜单，点击即可打包 - 在
env中配置对应的编译环境和自定义环境变量，UNI_PLATFORM是必须配置，其它项则会添加到process.env中，如上就可以使用process.env.CUSTOM_ENV获取自定义环境变量 - 在
define中配置自定义编译常量，在代码中体现为#ifdef H5-TEST ... #endif
使用示例如下：
// 模板语法中使用编译常量
<template>
<!-- #ifdef H5-TEST -->
<div></div>
<!-- #endif -->
</template>
// js中使用编译常量
function func() {
// #ifdef H5-TEST
xxx
// #endif
}
// js中使用自定义环境变量
let baseUrl = ''
if (process.env.CUSTOM_ENV) {
baseUrl = ''
} else {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
提示
需注意
1、package.json中不允许使用注释
2、如果需要使用命令行进行不同环境变量配置和打包，请使用uniapp cli项目
上次更新: 2025/09/05, 8:09:00