vue-cli5.0.x优雅降级,配置项目兼容旧版浏览器

news2024/11/26 2:56:20

兼容低版本谷歌浏览器

vue-cli5.0.x脚手架下的,如何降低项目版本以适用于底版本的浏览器。

  • 直接使用默认配置打包部署出来的项目再40,60、70版本的谷歌浏览器跑不起来,蓝屏或者浏览器白屏
  • 一般这种情况都需要通过Babel去做转换,我们是Vue Cli项目,实际上Vue项目在创建时就引入的Babel,直接使用即可,而且对于vue-cli5.0以上,配置更加简单舒适

解决方案:

修改package.json文件的browserslist配置,修改为你想要兼容的浏览器列表

"browserslist": [
    "> 0.03%",
    "not dead"
  ]

browerslist 指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
在项目下运行yarn browserslist,就可以查看到项目通过browserslist配置之后可以正常展示的浏览器以及版本信息。
在这里插入图片描述


解析一下这里的参数部分,可以看我这篇文章
vue项目优雅降级,es6降为es5,适应低版本浏览器渲染


这里有个网址可以帮助你快速的了解你的browserslist配置对于哪些浏览器有更好的兼容的测试。
在这里插入图片描述
网上搜索了很多方法,下载了babel-polyfill,@babel下的polyfill,再main.js引入再配置等等都不生效,原来cli5.0.x限制了webpack配置的browerslist的原因,>.<。


一般这样即可:

"> 1%",
"last 2 versions",
"not dead",
"Chrome 40.0",
"ie >= 6"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1162587.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp原生插件之安卓USB摄像头插件

插件介绍 安卓USB摄像头&#xff0c;支持拍照&#xff0c;录像&#xff0c;停止预览&#xff0c;开启预览&#xff0c;支持多摄像头切换 插件仅支持nvue页面 插件地址 安卓USB摄像头插件 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档地址 uniapp 安…

STM32H750之FreeRTOS学习--------(四)中断管理

四、FreeRTOS中断管理 中断的概念不再过多叙述&#xff0c;学习过逻辑的都知道 中断的执行过程 中断请求 外设产生中断请求&#xff08;GPIO外部中断、定时器中断等&#xff09;响应中断 CPU停止执行当前程序&#xff0c;转而去执行中断处理程序&#xff08;ISR&#xff09;…

SecureCRT 发送文件内容

当需要连接 Linux 服务器或设备的时候&#xff0c;SecureCRT 是一个利器。有一个工作场景是这样的&#xff0c;工程代码在服务器上编译完后运行&#xff0c;然后用 secureCRT 连接程序的指定端口&#xff08;用 telnet &#xff09;&#xff0c;连接上后就往端口里下发配置&…

在美团和阿里6年,很难却也真实...

先简单的说下&#xff0c;本人6年工作经验&#xff0c;曾就职于某大型国企&#xff0c;公司研究院成员&#xff0c;也就职过美团担任高级测试开发工程师&#xff0c;有丰富的高并发大型项目经验。 后端高并发、高性能、高可用性开发&#xff0c;自动化测试框架开发以及软件自动…

@机械装备企业,“专精特新”你需要这样做!

目录 生产过程有4个特点 三大管理难点 01 计划难管控 02 生产难协同 03 现场难管控 机械装备数字化建设怎么做&#xff1f; 01 计划管控 02 生产协同 03 现场数字化 从2021年7月至今&#xff0c;“专精特新”热度一直居高不下&#xff0c;但其实&#xff0c;这一词早在…

大数据可视化分析建模:每个人都是数据分析师

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 第一部分&#xff1a;介…

【嵌入式项目应用】__cJSON基础介绍与代码测试

目录 前言 一、JSON是什么&#xff1f; 1. JSON 基本语法 2. JSON值(value)的类型 3. 逻辑值&#xff08;true 或 false&#xff09; 4. null 5. NUMBER 数字&#xff08;整数或浮点数&#xff09; 6. STRING 字符串&#xff08;在双引号""中&#xff09; 7…

ChatGLM3-6B详细安装过程记录(Linux)

先附上GitHub官方地址: https://github.com/THUDM/ChatGLM3https://github.com/THUDM/ChatGLM3 一、预览 咱们可以先看看完成之后的界面: 1. 基于 Gradio 的网页版 demo 运行以下命令即可打开界面: python web_demo.py 运行界面如下: 2. 基于 Streamlit 的网页版 de…

【23真题】难!均79分!211题目强过985!

今天分享的是23年海南大学838的信号与系统试题及解析。 本套试卷难度分析&#xff1a;22年海南大学838考研真题&#xff0c;我也做过&#xff0c;若有需要戳这里自取&#xff01;平均分为80-90左右&#xff0c;最高分为133分。本套试题难度中等偏上&#xff0c;题量不多&#…

Python画图之草莓熊

Python-turtle画出草莓熊&#xff08;有趣小游戏&#xff09; 一、效果图二、Python代码 一、效果图 二、Python代码 # -*- coding: UTF-8 -*- import turtle as t# 设置背景颜色&#xff0c;窗口位置以及大小 t.colormode(255) # 颜色模式 t.speed(0) t.screensize(850, 760…

通过Python脚本支持OC代码重构实践(二):数据项提供模块接入数据通路的代码生成

作者 | 刘俊启 导读 在软件开发中&#xff0c;经常会遇到一些代码问题&#xff0c;例如逻辑结构复杂、依赖关系混乱、代码冗余、不易读懂的命名等。这些问题可能导致代码的可维护性下降&#xff0c;增加维护成本&#xff0c;同时也会影响到开发效率。这时通常通过重构的方式对已…

STM32智能小车(循迹、跟随、避障、测速、蓝牙、wife、4g、语音识别)总结

目录 1.电机模块开发 1.1 让小车动起来 1.2 串口控制小车方向 1.3 如何进行小车PWM调速 1.4 PWM方式实现小车转向 2.循迹小车 2.1 循迹模块使用 2.2 循迹小车原理 2.3 循迹小车核心代码 2.4 循迹小车解决转弯平滑问题 3.跟随/避障小车 3.1 红外壁障模块分析​编辑 …

Redis 应用问题

1-缓存穿透 1.1-问题描述 Key 对应的数据在数据源并不存在&#xff0c;每次针对此 Key 的请求从缓存获取不到&#xff0c;请求都会压到数据源&#xff0c;从而可能压垮数据源。 比如&#xff1a;用一个不存在的用户ID 获取用户信息&#xff0c;不论缓存还是数据库都没有&…

有哪些适合做小说推文的配音软件?

其实现在市面上的短视频配音软件数不胜数&#xff0c;怎样才能挑选到简单又实用的呢&#xff1f;今天我就来给你盘一盘各大配音软件的优缺点&#xff0c;大家可以根据自己的需求来选择合适的配音软件&#xff01; 一、悦音配音 推荐指数★★★★★ 推荐理由&#xff1a;无需自…

SpringBoot SerializationUtils克隆(反序列化) 类加载器不一致问题(ClassCastException)

问题分析 在SpringBoot中使用 org.apache.commons.lang.SerializationUtils.clone 方法时&#xff0c;发现克隆出来的类强转对应类时发生类型不一致的错误&#xff0c;经过检测发现两个看似相同的类的类加载器不一致 场景 报错信息 java.lang.ClassCastException: com.tianq…

伦敦金投资怎么玩收益高?

伦敦金&#xff0c;作为国际黄金市场的代表&#xff0c;一直备受投资者的关注。它有着高流动性和丰富的投资机会&#xff0c;但要真正玩得收益高&#xff0c;就需要掌握一些关键的方法和技巧。在本文中&#xff0c;万洲金业将为您提供专业建议&#xff0c;告诉您伦敦金投资怎么…

【广州华锐互动】VR虚拟现实技术在森林防火教学中的应用

在探索大自然的神秘面纱时&#xff0c;我们往往会遇到一些意想不到的风险&#xff0c;其中之一就是森林火灾。森林火灾是一种毁灭性的自然灾害&#xff0c;可以在短时间内摧毁大片森林&#xff0c;对人类和动物的生存环境造成严重影响。然而&#xff0c;通过3D仿真技术&#xf…