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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python文件和目录操作函数小结
2014/07/11 Python
Python回调函数用法实例详解
2015/07/02 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
使用python实现rsa算法代码
2016/02/17 Python
python Web开发你要理解的WSGI & uwsgi详解
2018/08/01 Python
pyqt5实现登录界面的模板
2020/05/30 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python同步windows和linux文件
2019/08/29 Python
python实现从wind导入数据
2019/12/03 Python
浅谈Python __init__.py的作用
2020/10/28 Python
蛋白质世界:Protein World
2017/11/23 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
生产部经理岗位职责
2013/12/16 职场文书
入党积极分子介绍信
2014/01/17 职场文书
致200米运动员广播稿
2014/02/06 职场文书
便利店投资创业计划书
2014/02/08 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
小学教育见习报告
2014/10/31 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
社区党务工作总结2015
2015/05/19 职场文书