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)
