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 不间断的图片滚动并可点击
Jan 15 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 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
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
java解析json方法总结
2019/05/16 PHP
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python partial函数原理及用法解析
2019/12/11 Python
python中Django文件上传方法详解
2020/08/05 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
文明风采获奖感言
2014/02/18 职场文书
大学专科求职信
2014/07/02 职场文书
活动简报范文
2015/07/22 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python