打通任督二脉的前端环境变量 — env

一、Vue CLI
可以先看看脚手架官网的介绍模式和环境变量
development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。在项目中的package.json中文件中进行配置例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

若不写则默认是development模式
vue-cli-service build --mode development
当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。
二、环境变量
你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.[mode]         # 只在指定的模式中被载入
注：我们常见的有
.env
.env.development（开发环境） 适用于 vue-cli-service serve
.env.test(测试环境)      适用于 vue-cli-service build --mode test
.env.prod （发布环境） 适用于 vue-cli-service build --mode prod

三、环境文件加载优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
即.env中文件和其他环境文件中变量一样时，前者会被覆盖。

四、关于环境文件说明
注意：只有NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。
例在环境文件中设置如下变量：

VUE_APP_SECRET=secret

在代码中使用环境变量

console.log(process.env.VUE_APP_SECRET)

在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret 的情况下，它会被替换为 “secret”。