vue-cli-servicebuild不同环境配置

vue-cli-servicebuild不同环境配置
背景
在项⽬部署时，我们需要在测试环境和⽣产环境使⽤不同的变量。

vue-cli提供了vue-cli-service build打包命令，然⽽vue-cli-service build默认的环境变量值则为production。

那我们通过npm run build打包构建，想要实现不同环境使⽤不同变量，暂时不能实现。

vue-cli-service介绍
vue-cli⽣成项⽬时，在package.json中会设置：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
vue-cli-service serve命令会启动⼀个开发服务器，默认指定的环境模式为development。

vue-cli-service build会在 dist/ ⽬录产⽣⼀个可⽤于⽣产环境的包，带有JS/CSS/HTML的压缩，和为更好的缓存⽽做的⾃动的 vendor chunk splitting。

环境变量和模式
在项⽬的根⽬录下我们可以创建不同模式的⽂件：
.env # 在所有的环境中被载⼊
.env.local # 在所有的环境中被载⼊，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载⼊
.env.[mode].local # 只在指定的模式中被载⼊，但会被 git 忽略
⼀般来说，我们会存在本地环境、测试环境、线上环境，那我们就需要创建三个模式⽂件。

.env.development开发环境模式
// 环境变量
NODE_ENV=development
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌⼊到客户端侧的包中
VUE_APP_ENV = 'development'
.env.test测试环境模式
// 环境变量（这⾥的环境变量是跟打包有关的，production则会进⾏压缩代码等，真正跟每个环境有关的变量是下⾯以VUE_APP开头的变量）
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌⼊到客户端侧的包中
VUE_APP_ENV = 'test'
.env.production线上环境模式
// 环境变量
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌⼊到客户端侧的包中
VUE_APP_ENV = 'production'
配置不同模式
部署时，构建打包执⾏npm run build，则会执⾏vue-cli-service build，默认模式为production，对应.env.production⽂件，取此⽂件中的环境变量。

想要配置测试环境，需要在scripts下增加脚本：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-test": "vue-cli-service build --mode test"
}
测试环境打包构建时，执⾏npm run build-test即可。

index.html使⽤环境变量
在index.html中可通过<%= process.env.VUE_APP_xxx %>的⽅式获取不同模式下配置的环境变量。

验证
可通过不同模式下对应的环境变量，判断是否为对应的环境。