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

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

阅读 1.3k

前端从业者

72 声望
1 粉丝
0 条评论

前端从业者

72 声望
1 粉丝
文章目录
宣传栏