前言
uni-app 项目在不同阶段需要部署到不同的环境，比如开发环境（dev）、测试环境（test）、UAT 环境（uat）、生产环境（prod）等，那么如何通过自动化构建工具实现在多环境下自动部署呢？我们先来看看不同打包方式下的环境配置。
一、uni-app 不同打包方式下的环境配置
uni-app 可通过 HBuilderX 方式和基于 vue-cli 命令行方式进行打包，两种方式下进行打包的开发环境和生产环境是不同的。
1.HBuilderX 方式
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX 中，点击 “运行” 编译出来的代码是开发环境，点击 “发行” 编译出来的代码是生产环境。
2.基于 vue-cli 命令行方式
使用基于 vue-cli 命令行方式创建项目可通过添加必要的环境变量和判断实现多环境配置，然后在编译时带上环境参数即可。
二、配置多环境实现自动部署
由以上分析可知，我们需要通过基于 vue-cli 命令行方式来实现自动化部署。
1.编写 js 文件，对环境进行判断
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
// 开发环境
const dev = {
common: "http://192.168.xx.xx:2000",
store:"http://192.168.xx.xx:2001",
buyer: "http://192.168.xx.xx:2002"
};
// UAT环境
const uat = {
common: "http://124.xx.xx.xx:2000",
store:"http://124.xx.xx.xx:2001",
buyer: "http://124.xx.xx.xx:2002"
};
// 生产环境
const prod = {
common: "http://128.xx.xx.xx:2000",
store:"http://128.xx.xx.xx:2001",
buyer: "http://128.xx.xx.xx:2002"
};
//默认生产环境
let api = dev;
//如果是开发环境
if (process.env.NODE_ENV == "development") {
api = dev;
} else if (process.env.NODE_ENV == "uat") {
api = uat;
} else {
api = prod;
}
2.修改 package.json 文件
{
"name": "shop-uniapp",
"version": "1.0.0",
"description": "#####开源不易，如有帮助请点Star",
"main": "main.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:h5-dev": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=development node /usr/local/uniapp-cli/bin/uniapp-cli.js",
"build:h5-uat": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uat node /usr/local/uniapp-cli/bin/uniapp-cli.js",
"build:h5-prod": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=prod node /usr/local/uniapp-cli/bin/uniapp-cli.js"
},
"repository": {
"type": "git",
"url": "http://xxx/shop-uniapp.git"
},
"keywords": [],
"author": "",
"license": "ISC"
}
|
3.打包
1
2
3
|
npm install cross-env -g && npm install && npm run build:h5-uat
|