[@vue/cli & element-ui] 环境变量与模式

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基础路径。