Vue - .env详解

1 .env 用途

项目实际开发过程中，可能会有区分环境的需求，比如开发环境、测试环境、生产环境等；不同的环境对应不同的配置，比如开发环境、生产环境的后端接口 BaseURL 一般都不同；此时可以使用 .env 文件来实现环境差异化配置。

2 .env 读取规则

在介绍 .env 文件的读取规则前，需先了解一下 vue-cli 的模式。

默认情况下，一个 Vue CLI 项目有三个模式：

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

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。

vue-cli 会根据模式参数自动从环境文件中载入环境变量。项目中一般会在package.json的scripts中配置命令脚本，映射vue-cli的命令。

// package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "serve:diy": "vue-cli-service serve --mode diy",
    "serve:custom": "vue-cli-service serve --mode dev.custom",
    "build": "vue-cli-service build",
    "build:develop": "vue-cli-service build --mode development",
    "build:custom": "vue-cli-service build --mode pro.custom",
    "lint": "vue-cli-service lint"
  }

• serve命令后没有指定模式时，默认读取.env(如有)和.env. development(如有)。
• serve:diy命令会读取.env(如有)和.env. diy(如有)。
• serve:custom命令会读取.env(如有)和.env. dev.custom(如有)。
• build命令后没有指定模式时，默认读取.env(如有)和.env. production(如有)。
• build:develop命令会读取.env(如有)和.env. development(如有)。
• build: custom命令会读取.env(如有)和.env. pro.custom(如有)。

3 .env 加载优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比全局环境文件 (即 .env) 拥有更高的优先级。
因此当 .env.production 中有与 .env 重复的键值时，.env.production 中的生效。

4 .env 书写规则

• 一个环境文件只包含环境变量的“键=值”对。
• 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。即自定义属性只能以VUE_APP_开头。

5 访问环境变量

通过nodejs的process.env来访问所有环境变量。

Vue.prototype.$env = process.env
console.log(this.$env.VUE_APP_BASEURL)

参考资料

Vue CLI