vue-cli4 配置不同开发环境打包命令

#. 前言

为什么会需要配置多种环境变量？

在一个产品的开发过程中，一般来说都是会经历这么一个过程：本地开发 → 测试版部署 → 测试 → 预上线 → 正式上线。对应的每一个环节中的服务器地址，接口地址...都会不一样。那么我们需要怎么去处理这种情况。

#一. 如何配置环境变量

#1. 创建文件

在 vue-cli4 的脚手架构建的项目根目录中新建一个 .env.[model] 文件，model 为一个变量，可以通过这个 model 的变量值来判断当前属于哪个环境。model 可以根据你的需求来修改, 该文件中写上对应的键值对。你需要多少个环境，就创建多少个 .env.[model] 在根目录中，文件如下图。

# 预发环境
.env.beta

# 开发环境
.env.development

# 生产环境
.env.production

# 测试环境
.env.test

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

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

举个例子：

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

请注意！！！

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

#2. 环境变量文件说明

现在我们来到配置文件，这个配置文件的功能是为了判断当前打包环境是生产还是测试，或者本地，当然你也可以有很多的环境。在配置文件中我们通过 process.env.VUE_APP_BASE_URL 这个全局字段去判断环境， 然后将对应的接口地址匹配上。注意一点，上面的 NODE_ENV = "production" 不可以省略，vue-cli 4.0 及之后的版本会根据 NODE_ENV = "production" 来判断是否生产环境，如果你改变了这个就会被默认 NODE_ENV = "development"，development 和 production 模式下打包出来的包结构会不同，为了一致性，所以配置文件的第一个字段应该设置为 NODE_ENV = "production"。

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

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

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

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

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

NODE_ENV = "beta"
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': ''
        }
      }
    }
  }
}

#3. 配置打包命令

package.json 文件下的脚本：

{
  "script": {
    "dev": "vue-cli-service serve && webpack-dev-server --open --mode dev",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "build:beta": "vue-cli-service build --mode beta",
    "build:test": "vue-cli-service build --mode test"
  }
}

上面提到创建的 .env.[model] 文件，文件名中的 model 对应 package.json 文件中的打包脚本 --model [model]。

例如我现在想打包正式环境，正式环境对应 .env.[model] 就是 .env.prop。

在 package.json 的 script 中添加 "build:prod": "vue-cli-service build --mode production"，其中 production 这个对应配置文件名的 mode，这样 webpack 打包的时候会自动跟踪到这个文件，并去读取其中的各种配置字段， 我们在项目中任意位置就可以通过 process.env.xx 拿到其中 xx 配置属性。

现在我们只需要运行对应的脚本命令就可以打包对应环境的项目代码。例如：我现在想打包 production 环境下的项目，在控制台运行 npm run build:prod，就可以执行正式环境打包。运行 npm run build:dev，则可以打包测试环境，该模式也可用于自动化部署。

综上所述，vue-cli4.x版本的打包命令和环境变量就配置完成了。