关于vue-cli3:vuecli-elementui-环境变量与模式

1. 环境变量的设置

vue-cli3 中，通过在根目录下设置 .env[.mode] 文件，来设置环境变量。
在文件中，通过 键 = 值 设置不同的环境变量。

//.env
VUE_APP_API_BASEURL = 'a.com'

But 只有以 VUE_APP_ 结尾的变量，才会被 webpack.DefinePlugin 动态嵌入到客户端侧的包中，作为全局变量应用。应用形式为：

let api = process.env.VUE_APP_API_BASEURL;

2. 模式

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

//package.json
{
    "scripts": {"dev-build": "vue-cli-service build --mode development"}
}

能够通过为 .env 文件减少后缀来设置某个模式下特有的环境变量。
比方在 development 模式下，只会加载文件 env.development 内的环境变量。

3. 常见应用场景

切换环境对应的 api 接口。
比方，在 .env.development 文件中设置测试环境 api 的根底门路，在 .env.production 文件中设置生产环境 api 的根底门路。
这样，通过应用 --mode 给命令行设置不同的模式，就能够让打包好代码在不同环境下切换 api 根底门路。