vue-cli4.x配置打包命令

最近在接手一个项目中发现每次打包的时候都要去修改接口请求地址，如果是发测试我们打包的时候就要把axios.defaults.baseURL赋值为测试地址，手动改太不方便了，不如配置打包命令，改变手动频繁操作

首先我们先看下vue-cli官网对于环境变量的解释和说明：vue-cli官网

接下来开始我的配置流程：

第一步：我们在项目根目录创建四个文件，如下图所示：

简单说明一下为什么要创建者四个文件：

首先我们创建的文件名必须是 .env.xxxx，.env.xxxx文件的xxxx是必须和package.json里面的scripts对象内部的命令一致

举个例子：

我们创建了.env.test 这个文件，那么我们配置的打包命令build:test的值"vue-cli-service build --mode test"，--mode 后面的 test 必须跟 文件.env.test 一致，这样我们打包命令才会找到环境变量文件里面配置的参数

"build:test": "vue-cli-service build --mode test"

第二步：下面说下环境变量文件内部的书写：

.env.test   (测试环境变量)

NODE_ENV = "production"
VUE_APP_BASE_URL = "接口请求测试地址"
VUE_APP_API = "接口请求测试地址"

.env.production （正式环境变量）

NODE_ENV = "production"
VUE_APP_BASE_URL = "接口请求正式地址"
VUE_APP_API = "接口请求正式地址"

.env.beta  (预发环境变量)

NODE_ENV = "production"
VUE_APP_BASE_URL = "接口请求预发地址"
VUE_APP_API = "接口请求预发地址"

.env.development  (开发环境变量)

NODE_ENV = "development"
VUE_APP_BASE_URL = "/api"  //vue跨域代理配置的标识
VUE_APP_API = "测试环境地址"

说明一下开发环境变量文件VUE_APP_BASE_URL的值指向的是我们在vue.config.js配置的跨域代理的字符串标识，请看下图：

module.exports = {
    publicPath: './',
    devServer: {
        proxy: {
            '/api': {
                target: '接口请求测试地址', //API服务器的地址
                ws: true,  //代理websockets
                changeOrigin: true, // 虚拟的站点需要更管origin
                pathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                    '^/api': ''
                }
            }
        }
    }
}

补充说明一下：当我们执行npm run build:test打包命令时，脚手架会去查找 .env.test文件，然后拿到我们配置的VUE_APP_BASE_URL，并赋值给axios.defaults.baseURL

第三步：我们要修改axios封装，指定axios默认的接口请求url

// process.env.VUE_APP_BASE_URL 这个就是我们创建的环境变量文件里面的参数
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
// 请求超时时间
axios.defaults.timeout = 10000;

第四步：配置打包命令：（打包命令在package.json文件）

下面四个命令都是配置的：

"build:dev": "vue-cli-service build --mode development",
"build:test": "vue-cli-service build --mode test",
"build:beta": "vue-cli-service build --mode beta",
"build:pro": "vue-cli-service build --mode production"

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:dev": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:beta": "vue-cli-service build --mode beta",
    "build:pro": "vue-cli-service build --mode production"
  },

综上所述，vue-cli4.x版本的打包命令和环境变量就配置完成了，如有问题欢迎小伙伴指正。。。