@vue/cli3 构建环境变量

问题

开发中我们的Web应用可能有多个运行环境，开发环境（本地代码调试），测试环境（部署测试代码），正式环境。

不同的运行环境下，我们可能有部分代码需要根据环境来做对应的改变。例如：

// 测试环境需要用这个token
const app_token = "111111"; 
// 正式环境需要用这个token
const app_token = "222222";

我们可以在构建脚本中添加打包不同的版本，来实现。

解决

1. 编译环境变量配置

package.json 中添加

{
	"scripts":{
		"build:test":"vue-cli-service  build --mode test",
		"build:product":"vue-cli-service  build --mode product"
	}
}

在工程根目录添加两个文件，

• env.test

NODE_ENV = 'product'
VUE_APP_BUILD = 'test'

• env.product

NODE_ENV = 'production'
VUE_APP_BUILD = 'product'

注意：自定义环境变量命名必须 VUE_APP_ 开头

NODE_ENV： ‘production’ ，表示使用产品化构建配置，即构建过程使用代码压缩等
VUE_APP_BUILD: ‘test’ | ‘product’ 自定义环境变量， test 表示对应测试环境构建，product 表示对应正式环境构建。

目录结构如下

|
| -- .env.test
| -- .env.product
| -- package.json

2. 代码中

if(process.env.VUE_APP_BUILD === 'demo'){
	const app_token = "222222";
}else{
	const app_token = "111111";	
}

3. 构建

打包测试环境

> npm run build:test 

打包正式环境

> npm run build:product