vue-cli3多环境打包配置

需求

一个项目分别有开发环境、测试环境和线上环境等多个环境，由于不同环境所需要的环境变量不一样，例如http请求的域名或路径不同，故需要对不同环境进行打包配置。

Vue CLI默认有三个模式：development、test、production，当运行vue-cli-service命令时可以通过 --mode 指定模式执行。

举个例子：
启动开发环境服务命令（默认为development环境，可不用指定mode）：vue-cli-service serve
启动测试环境服务命令：vue-cli-service serve --mode test
测试环境打包命令：vue-cli-service build --mode test
正式环境打包命令（production，可不用指定mode）：vue-cli-service build

在项目根目录创建文件 .env.[mode]（mode为模式名称）可以定义对应环境的环境变量。

文件内容只包含环境变量的“键=值”对，如：

NODE_ENV = 'production'
VUE_APP_BASE_API = 'http://xxx'

NODE_ENV为模式名称；
VUE_APP_为前缀的变量可通过 process.env.VUE_APP_XXX 的方式进行访问

新建3个环境变量文件，分别是.env.development、.env.test、.env.production

.env.development（/api为代理路径）

NODE_ENV = 'development'
VUE_APP_BASE_API = '/api'

.env.test

NODE_ENV = 'test'
VUE_APP_BASE_API = 'http://www.test.com'

.env.production

NODE_ENV = 'production'
VUE_APP_BASE_API = 'http://www.pro.com'

创建axios对象进行http请求

request.js

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 60 * 1000,
  method: 'get'
})

package.json配置打包命令。默认有生产环境和开发环境命令，现加上测试环境命令 build-test

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