交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • vue-cli3添加模式配置多环境变量的方法

    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)
     ...

    优化

    到这,功能已经实现了。

    美滋滋地打个包,妈呀,体积也太大了:

    此处解决办法为强写 NODE_ENV ,最终.env.uat配置如下:

    NODE_ENV=production
    VUE_APP_BUILD_TYPE=uat

    这样子顺眼些了,但整个项目打包这部分还是有很大的优化空间,下期再干咯~

    总结

    以上所述是小编给大家介绍的vue-cli3添加模式配置多环境变量的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • vue-cli3环境变量与分环境打包的方法示例
    • vue-cli3.0 环境变量与模式配置方法
    • vue项目环境变量配置的实现方法
    • vue-cli配置环境变量的方法

    广而告之:
    热门推荐:
    Bootstrap 组件之按钮(二)

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 按钮组 .btn-group>.btn : 一组.btn按钮包裹在.btn-group 外包元素.btn-group {position/display/} 按钮元素.btn <div class="···

    微信小程序 登录的简单实现

    微信小程序 实现登录 最近一段时间,微信小程序在张小龙的8小时演讲下瞬间火了起来,但是呢没火多久,就迅速沉静下去了,我也是不知道张小龙什么想法,但是我想法挺多的,好了,废话说多了,聊一下正题吧,我呢是刚入行的小程序员,一路上采坑不断,别人遇不到的坑基本上踩了一···

    Vue+Mock.js模拟登录和表格的增删改查功能

    前言 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据,模拟各种场景。 5 项目不背锅(等后端给接口的话可能会背锅) 等等优点,最后一条我加的。 第一步先安装mock.js npm install m···

    使用Cookies保存网站历史浏览记录实例代码

    下面的代码,注意利用了cookies的多个增加判定等,学习cookies操作的朋友,非常值得一看。核心代码:复制代码 代码如下:function glog(evt){ evt=evt?evt:window.event; var srcElem=(evt.target)?evt.target:evt.srcElement; try{ while(srcElem.parentNode&&src···

    HTML5移动端开发中的Viewport标签及相关CSS用法解析

    移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。 layout viewport(布局视口) 一般移动设备的浏览器都默认设置了一个viewp···

    PHP提示Notice: Undefined variable的解决办法

    PHP默认配置会报这个错误,我的PHP版本是5.2.13,存在这个问题: Notice: Undefined variable 这就是将警告在页面上打印出来,虽然这是有利于暴露问题,但实现使用中会存在很多问题。 需要设置显示错误级别,来解决问题。 网络上的通用解决办法是修改php.ini的配置: 解决方法:···

    AngularJS 最常用的功能汇总

    AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用Angu···

    Javascript对象中关于setTimeout和setInterval的this介绍

    在Javascript里,setTimeout和setInterval接收第一个参数是一个字符串或者一个函数,当在一个对象里面用setTimeout延时调用该对象的方法时 复制代码 代码如下: function obj() { this.fn = function() { alert("ok"); console.log(this); setTimeout(this.fn, 1000);//直···

    jQuery 插件实现随机自由弹跳气泡样式

    一个基于jQuery的气泡动画插件,在指定区域上方(左/右)定时间隔产生气泡,然后随机水平速度进行仿自由落体运动。到达区域底部之后做弹跳运动,速度逐渐衰减。直至停止运动。 在线演示 安装方法 由于是基于jQuery的扩展插件,因此引入jQuery是必须的。 此外,还需引入插件自···

    php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法

    最近遇到一个问题,就是在使用php的mail函数发送utf-8编码的中文邮件时标题出现乱码现象,而邮件正文却是正确的。最初以为是页面编码的问题,发现页面编码utf-8没有问题啊,找了半天原因,最后找到了问题所在。   1.使用 PEAR 的 Mail 类 PEAR 的 Mail 类可以让你选择使用···