vue-cli3添加模式配置多环境变量的方法


Posted in Javascript onJune 05, 2019

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 选项参数为命令行覆写默认的模式。

"scripts": {
  "build": "vue-cli-service build",
  "build:uat": "vue-cli-service build --mode uat"
 }

Step3:使用

// 是否预发部署
const IS_UAT = process.env.VUE_APP_BUILD_TYPE === 'uat'
const _url = IS_UAT ? 'http://a.123.com' : 'http://b.123.com'

// 是否添加埋点
const IS_ADD_JAQ = process.env.NODE_ENV === 'production' && !IS_UAT
if (IS_ADD_JAQ && loginUser) addJaq(loginUser)
 ...

优化

到这,功能已经实现了。

美滋滋地打个包,妈呀,体积也太大了:

vue-cli3添加模式配置多环境变量的方法

此处解决办法为强写 NODE_ENV ,最终.env.uat配置如下:

NODE_ENV=production
VUE_APP_BUILD_TYPE=uat

vue-cli3添加模式配置多环境变量的方法

这样子顺眼些了,但整个项目打包这部分还是有很大的优化空间,下期再干咯~

总结

以上所述是小编给大家介绍的vue-cli3添加模式配置多环境变量的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 #Javascript
js实现随机8位验证码
Jul 24 #Javascript
Vue中全局变量的定义和使用
Jun 05 #Javascript
详解express使用vue-router的history踩坑
Jun 05 #Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 #Javascript
用webpack4开发小程序的实现方法
Jun 04 #Javascript
JS实现的对象去重功能示例
Jun 04 #Javascript
You might like
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
js实现全选和全不选
2020/07/28 Javascript
python赋值操作方法分享
2013/03/23 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
分享python函数常见关键字
2022/04/26 Python