VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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配置环境变量的方法

    广而告之:
    热门推荐:
    vue项目实战总结篇

    这篇文章把小编前段时间做的vue项目,做个完整的总结,具体内容请参考本文。 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署。 废话不多说了。干货直接上。 一、 必须node环境, 这次就不写node环境的安装了。过两天我会写个node环境的安装随笔。 二、 node环境配···

    PHP最常用的ini函数分析 针对PHP.ini配置文件

    * ini_get():获取配置文件的选项值 这个函数相信很多人都使过,就是获取配置文件中某一个选项的值,如果是true值就返回1,如果是false值就返回0,字符串就返回字符串。 比如手册中的例子: <?php /* Our php.ini contains the following settings: display_erro···

    W3C教程(2):W3C 程序

    W3C 的标准化程序分为 7 个不同的步骤。 W3C 的标准化程序分为 7 个不同的步骤。 W3C 规范的批准步骤 在 W3C 发布某个新标准的过程中,规范是通过下面的严格程序由一个简单的理念逐步确立为推荐标准的: W3C 收到一份提交 由 W3C 发布一份记录 由 W···

    Vue表情输入组件 微信face表情组件

    VUE表情包输入组件,先来张成品图看看。 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧。 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 2.样式是用scss需要安装依赖: npm install node-sass sass-loader -D 思路: 页面内容···

    php.ini 中文版

    [PHP]  ; PHP还是一个不断发展的工具,其功能还在不断地删减  ; 而php.ini的设置更改可以反映出相当的变化,  ; 在使用新的PHP版本前,研究一下php.ini会有好处的  ;;;;;;;;;;;;;;;;;;;  ; 关于这个文件 ;  ;&···

    Angular 表单控件示例代码

    本文将介绍 Angular Template-driven 表单中,常用控件的使用。涉及的表单控件如下: text number radio select (基本类型) select (对象) multi select cascading select (级联操作) checkbox (boolean) multi checkbox 表单的局部效果 数据接口 export interface User {···

    织梦DedeCMS手机端文章内容图片设置自适应屏幕的方法

    织梦dedecms默认的文章内容里面的图片是固定大小的,这样在手机端里面就可能会导致图片不能完整显示,甚至把屏幕撑开,这样非常不友好,所以这里就给大家分享一个方法,让手机端的文章内容里面的图片能够自适应图片大小。   方法如下:   找到并打开手机端···

    最新织梦DedeCMS V5.7 SP2模板安装图文教程

    最新织梦DedeCMS V5.7 SP2模板安装图文教程 第一步: 上传所有文件到服务器,并设置根目录有写入权限, 第二步: 打开浏览器输入http://你的网址/install/index.php  如果出现Dir 看,请往下看。 当打开安装页面的时候,你···

    php垃圾代码优化操作代码

    公司有几个网站搭在美国的虚拟主机上,服务器上的mysql服务差不多每一天都会突然不知什么时候挂掉,然后过一会又恢复了,怀疑是超出cpu的使用限制而被自动结束了,但是实际上该服务器上的流量很小。于是早先的时候联系了服务器提供商的印度阿三客服,想看看是不是其他用···

    css 样式加载的优先级使用经验分享

    昨天项目开发过程中,遇到一个样式加载优先级的问题。 定义了class,在页面最初加载的过程中是被识别出来了,当加载完毕后的一瞬间,样式像被重写了一样,定义好的margin-bottom不起作用了。控件因为没有这个样式就挤在了一起。 测试中FF和Chrome都是可以的,IE8有问题···