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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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获取中英混合字符串长度的方法
2014/06/07 PHP
php遍历目录方法小结
2015/03/10 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
详细讲解JS节点知识
2010/01/31 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
python编写的最短路径算法
2015/03/25 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
经典而简洁的婚礼主持词
2014/03/13 职场文书
本科生自荐信
2014/06/18 职场文书
大专生求职信
2014/06/29 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
辞职信的写法
2015/02/27 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
Python循环之while无限迭代
2022/04/30 Python