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事件串连执行多个处理过程的方法
Mar 09 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
理解javascript闭包
Dec 15 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
node中koa中间件机制详解
Aug 22 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
将python安装信息加入注册表的示例
2019/11/20 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript