前言

在项目开发中，一般分为有三个环境：

• development环境
• test环境
• production环境

因此，我们就会遇到某些变量会根据不同的环境进行变动。例如，后端暴露给前端的API地址。在development环境中，API地址可能是后端的开发主机地址；但是到了production环境，API地址就变成了服务器主机地址。面对这种情况，难道我们在每次把代码部署到服务器前都要收到去修改吗？不不不！在vueCli3.0之后，vueCli新增了环境变量与模式来解决这个问题。

环境变量

环境变量是全局静态变量，环境变量以“键-值”对的形式存储在环境文件中。如下：

VUE_APP_FOO=bar
VUE_APP_SECRET=secret

在vueCli3.0中，使用环境变量，直接调用即可。例如调用VUE_APP_FOO:

console.log(process.env.VUE_APP_FOO)

注意：
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 “development”、“production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

---

更多内容，请查看：《在客户端侧代码中使用环境变量》

环境文件

环境文件用于存储环境变量，一个环境文件只包含环境变量的“键=值”对。

在vueCli3.0中，环境文件默认文件名为.env，放在项目文件的根目录下，也就是与package.json在同一层目录。.env环境文件存放的是通用的环境变量，所有的环境都可以调用.env里面的环境变量。

此外，我们还可以为某个特定的环境（模式）设定环境文件。特定环境文件命名规格为：
.env+.+环境名称，例如 ：

特定（模式）环境文件的存放位置跟.env一样。特定（模式）环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。例如：

.env文件

VUE_APP_FOO=bar
VUE_APP_SECRET=secret

.env.production文件

VUE_APP_FOO=bar123
VUE_APP_SECRET=secret

那么，在production环境下，VUE_APP_FOO的值将是bar123。因为， .env.production文件的优先级高于.env文件。

模式（环境）

前言：

在vueCli3.0，模式对应一种环境。也就是说，production 模式 = production 环境。

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build
• test 模式用于 vue-cli-service test:unit和 vue-cli-service test:e2e

在环境文件中，有一个NODE_ENV的环境变量，该变量用于存放当前的模式（环境）的名字。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 “development”。

项目运行时，会根据运行的环境自动加载对应的环境文件。

此外，我们还可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。其实这就是环境文件那一节的特定环境文件。

上面提到，Vue CLI 默认的模式（文件）有三个，而且我们还可以为特定模式（环境）设置环境文件。只要我们给 .env 文件增加都后缀是默认的三个模式名（development 、production、test ）。我们就可以直接正常使用，不需要进行其他配置。

但是呢！我不要给特定模式（环境）的环境文件起这么长的名字。我想把.env.development改为.env.dev，把.env.production改为.env.prod。
可以改，但是如果直接npm run serve你会发现，.env.dev的环境变量无法调用了。
该怎么办呢？不慌，只需要我们在package.json上改下配置就行了：

{
  "scripts": {
    "serve": "vue-cli-service serve --mode=dev",
    "build": "vue-cli-service build --mode=prod"
  }
}

其实就是指定mode。

扩展：
既然可以指定mode，那我们也就可以借助mode来交换模式的环境文件：

{
  "scripts": {
    "serve": "vue-cli-service serve --mode=production",
    "build": "vue-cli-service build --mode=development"
  }
}

上面代码，交换了production环境和development的环境文件。

此外，我们也可以自定义模式（环境）。

结语

以上就是关于vueCli 3.0 的环境变量与模式。正确使用环境变量可以节省很多工作。在项目中引入环境变量也使得项目更加合理规范。

参考文献：
vueCli 3.0 ——环境变量和模式