vue-cli3.x配置开发、测试及生产三个环境的地址

背景：正常情况下webpack给我们提供了development和production两个环境。一个用于开发，一个用于正式环境，想象是美好的，但是我们有时候不止一个服务器吧，比如更新到正式服之前我们需要先在测试服测试通过，这个时候如果还是两个环境变量那我们打包的时候就需要手动切换地址了呀，所以基于此，再手动增加一个测试环境。

下面以vue-cli3.x为例：

1、新建vue-cli项目，如下

vue create demo_01

2、目录结构

3、在根目录新建三个文件.env / .env.production / .env.test，内容分别为

// .env
VUE_APP_CURRENTMODE='www.test.com'

// .env.production
VUE_APP_CURRENTMODE='production'

// .env.test
VUE_APP_CURRENTMODE ='test'

.env这个文件主要是开发环境，.env.production与.env.test的区别为前者是正式环境，后者为测试环境。

4、修改package.json如下。

"scripts": {
    "serve": "vue-cli-service serve",
    "pro": "vue-cli-service build --mode production",
    "start": "npm run serve",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
},

为了方便查看效果，我们在app.vue输出一下：

分别执行npm run serve 、npm run test、npm run pro查看控制台。

// npm run serve

// npm run test

// npm run pro

环境区分出来了，做其他方面的数据区分就好解决了，比如可以根据VUE_APP_CURRENTMODE来使用不同的请求域名等。

号外：

为什么我们经过上面的配置就能达到区分环境的效果了呢？

原因在这里：

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

模式不同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在development 模式下 NODE_ENV 的值会被设置为 “development”。
你可以通过为 .env文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。

也就是说，上面我们修改package.json的scripts，为pro及test设置了--mode production/test， 当我们执行npm run test/pro时已经将当前的NODE_ENV设置为对应的环境变量，也加载了对应模式下的.env文件。