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动画效果类封装代码
Aug 28 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
vue 组件简介
Jul 31 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php 强制下载文件实现代码
2013/10/28 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python help()函数用法详解
2014/03/11 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
python简单操作excle的方法
2018/09/12 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
介绍一下write命令
2012/09/24 面试题
个人自我鉴定写法
2013/11/30 职场文书
运动会广播稿20字
2014/02/18 职场文书
我爱我家教学反思
2014/05/01 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
创先争优宣传标语
2014/10/08 职场文书
《梅花魂》教学反思
2016/02/18 职场文书