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入门第一课 jQuery选择符
Mar 14 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
对layui中table组件工具栏的使用详解
Sep 19 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
再谈JavaScript线程
2015/07/10 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python实现图片拼接的代码
2018/07/02 Python
Python sorted排序方法如何实现
2020/03/31 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Etam德国:内衣精品店
2019/08/25 全球购物
校园之星获奖感言
2014/01/29 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
天河观后感
2015/06/11 职场文书
毕业欢送会致辞
2015/07/29 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python