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