vue-cli 4.0.5 配置环境变量样例

Posted 2020-11-23 zhourongcode

在项目根目录下建 .env 文件，环境变量无论运行何种模式均可获取其设置值。
vue 中主要有三种模式: development、test、production,在 package.json 中目前三种配置：

"serve": "vue-cli-service serve", //对应 development 模式
"build": "vue-cli-service build", //对应 production 模式
"lint": "vue-cli-service lint"  // 对应 eslint 规范检测

新建自己的模式注意注意的创建文件以 .env 开头后面书写自己想要要的, 如创建 .env.newplayer 文件，内容必须为 VUE_APP_ 开头

VUE_APP_TEST = TEST
VUE_APP_PLAYER = PLAYER

但是在 package.json 中新配置运行如下:

"serve:newplayer": "vue-cli-service serve --mode newplayer",

在项目中获取环境配置就可使用:

console.log(process.env.VUE_APP_PLAYER)

在线 DEMO: https://github.com/changxianglin/vue-env.git

参考:

1. 主要参考
2. vuec-li3 环境变量配置
3. vue-cli3.0 环境变量与模式
4. vue-cli3 .env.development和.env.production环境变量配置