如何使用vue-cli3配置多环境下的模式模式变量？

本文共计583个文字，预计阅读时间需要3分钟。

Vue CLI 3 配置多环境变量+官方网描述：环境变量和模式+需求+根目录运行环境判断+预发布环境操作完成跳转地址与线上环境跳转地址不同+线上环境添加埋点脚本+实现步骤：Step1：在项目'vue-cli3'中配置...

vue-cli3配置多环境变量

先挂官网描述：环境变量和模式

需求

根据运行环境判断执行代码：

• 预发环境操作完成跳转地址与线上环境跳转地址不同
• 线上环境添加埋点脚本

实现

Step1：在项目根目录中新建.env.uat

.env.uat配置如下：

VUE_APP_BUILD_TYPE=uat

vue-cli中规定，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

代码中可以通过 process.env.VUE_APP_SECRET 这样访问。

NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

Step2：修改 package.json

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