添加模式配置多个环境变量的方法

Vue-cli3配置多个环境变量

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

需求

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

预发送环境操作完成跳转地址不同于在线环境跳转地址，而在线环境添加埋点脚本实现

步骤1:在项目的根目录下创建一个新的环境用户界面。env.uat的配置如下：

VUE_APP_BUILD_TYPE=uat

根据vue-cli，只有以VUE_APP_开头的变量才会被webpack静态嵌入到客户端的包中。定义替换.

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

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

第二步：修改包

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

脚本' : { ' build ' : ' vue-CLI-服务构建'，' build : UAT ' : ' vue-CLI-服务构建-模式UAT'}步骤3:使用

//是否预部署const is _ UAT=process . env . vue _ app _ build _ type==' UAT ' const _ URL=is _ UAT？http://a . 123.com ' : ' http://b . 123.com '/是否要添加埋点constis _ add _ jaq=process。env.node _ env==' production '！is _ uatif(is _ add _ jaq login user)add jaq(login user).最佳化

至此，该功能已经实现。

美滋滋地做个包，妈呀，体积太大了：

这里的解决方案是编写NODE_ENV，以及的最终配置。env.uat如下：

NODE _ ENV=production vue _ APP _ BUILD _ TYPE=UAT

这个比较顺眼，但是整个项目包装还有很大的优化空间，下一期我们会再做一次~

摘要

以上就是边肖介绍的vue-cli3中添加模式和配置多个环境变量的方法，对大家都有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！