vue正式环境和测试环境切换

目的：
根据不同的启动命令应用对应环境的域名及其它变量值

创建配置文件：

在项目根目录下创建这四个文件，作用及含义分别为：
.env：公用配置文件，不管在哪个环境启动的项目，都会使用这个文件里面的变量，下面三个文件里和此文件同名的变量会覆盖.env里的变量，不同名就合并，也就是说.env里的同名变量优先级更低；
.env.development：开发环境，默认不指定任何环境启动时就使用这个文件里的变量；
.env.staging：测试环境，在 package.json 启动命令后加 --mode staging 指定以此环境启动
.env.production：正式环境，在 package.json 启动命令后加 --mode production 指定以此环境启动

为什么 --mode staging 就能指定启动测试环境？
因为它对应着 .env.staging 文件名里的 staging，这三个文件名都是固定的。

文件示例
.env

VUE_APP_VALUE = "common value"
VUE_APP_VALUE1 = "common value1"

.env.development

VUE_APP_VALUE1 = "development value1"

.env.production

VUE_APP_VALUE = "production value"
VUE_APP_VALUE1 = "production value1"

package.json 配置

  "scripts": {
    "serve": "vue-cli-service serve", // 启动开发环境
    "staging": "vue-cli-service serve --mode staging", // 启动测试环境
    "production": "vue-cli-service serve --mode production", // 启动正式环境
    "build": "vue-cli-service build", // 构建正式环境
    "build2": "vue-cli-service build --mode staging", // 构建测试环境
    "build3": "vue-cli-service build &&vue-cli-service build --mode staging", // 同时构建正式环境和测试环境
  },

启动测试环境：npm run serve
此时取这两个变量值：

console.log(process.env.VUE_APP_VALUE) // common value
console.log(process.env.VUE_APP_VALUE1) // development value1

启动正式环境：npm run production

console.log(process.env.VUE_APP_VALUE) // production value
console.log(process.env.VUE_APP_VALUE1) // production value1