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 相关文章推荐
javascript中的继承实例代码
Apr 27 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
json数据格式常见操作示例
Jun 13 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
Linux下PHP连接Oracle数据库
2014/08/20 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python实现JSON反序列化类对象的示例
2018/01/31 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
实习生自我评价
2014/01/18 职场文书
社区科普工作方案
2014/06/03 职场文书
司机岗位职责范本
2015/04/10 职场文书
小学校本教研总结
2015/08/13 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server