如何通过vue-cli3配置多环境变量实现不同模式的长期使用？

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

vue-cli3配置多环境变量+官方网描述：环境变量和模式+需求+根据基础运行环境判断执行代码：+预发布环境操作完成跳转地址与线上环境跳转地址不同+线上环境添加埋点脚本+实现Step1：在项目“vue-cli3配置多环境变量+官方描述：环境变量和模式+需求+根据基础运行环境判断执行代码：+预发布环境操作完成跳转地址与线上环境跳转地址不同+线上环境添加埋点脚本+实现Step1：在项目

vue-cli3配置多环境变量

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

需求

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

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

实现

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

.env.uat配置如下：

VUE_APP_BUILD_TYPE=uat

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

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