关于vue.js:vuecli3多环境打包配置

需要

一个我的项目别离有开发环境、测试环境和线上环境等多个环境，因为不同环境所须要的环境变量不一样，例如 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 为模式名称）能够定义对应环境的环境变量。

• 举个例子：
  .env.development(开发环境配置)
  .env.test(测试环境配置)
  .env.production(生产环境配置)

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

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

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

利用：http 申请门路在不同环境下打包配置

1. 新建 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'

2. 创立 axios 对象进行 http 申请

   request.js

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

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

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

4. 执行打包命令
   测试环境：npm run build-test
   线上环境：npm run build