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

兼容低版本谷歌浏览器

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.hqwc.cn/news/157338.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库概论

目录 什么是数据库数据库的概念模型层次模型网状模型关系模型 为什么要使用关系型数据库完整性约束结构化查询语言SQL基本语句 什么是数据库 考虑这些问题&#xff1a;当用户使用软件计算时&#xff0c;如果想要保存计算结果或者想选择不同的题目&#xff0c;是否要保存、读取…

爱写bug的小邓程序员个人博客

博客网址: http://www.006969.xyz 欢迎来到我的个人博客&#xff0c;这里主要分享我对于前后端相关技术的学习笔记、项目实战经验以及一些技术感悟。 在我的博客中&#xff0c;你将看到以下主要内容&#xff1a; 技术文章 我将会分享我在学习前后端技术过程中的一些感悟&am…

解决在Win7下运行一些老游戏花屏或色彩异常问题的方法

有一些喜欢回顾经典老游戏的玩家们&#xff0c;在目前最新的windows7的操作系统下&#xff0c;运行某些游戏会出现花屏&#xff0c;问题的原因是因为win7对这些游戏的DirectDraw不兼容&#xff0c;一种方法是改游戏配置文件&#xff0c;把游戏色彩8bit改成16bit&#xff0c;当然…

数据仓库-拉链表

在数据仓库中制作拉链表&#xff0c;可以按照以下步骤进行&#xff1a; 确定需求&#xff1a;首先明确需要使用拉链表的场景和需求。例如&#xff0c;可能需要记录历史数据的变化&#xff0c;以便进行时间序列分析等。设计表结构&#xff1a;在数据仓库中&#xff0c;拉链表通…

Tomcat下载地址(详细)

Apache Tomcat - Apache Tomcat 8 Software Downloadshttps://tomcat.apache.org/download-80.cgi2.找到Archives 3.选择下载的把版本 4.选择具体下载那个版本 5. 6.一般选择tar.gz结尾的压缩包

R语言的DICE模型实践技术

随着温室气体排放量的增大和温室效应的增强&#xff0c;全球气候变化问题受到日益的关注。我国政府庄严承诺在2030和2060年分别达到“碳达峰”和“碳中和”&#xff0c;因此气候变化和碳排放已经成为科研人员重点关心的问题之一。气候变化问题不仅仅是科学的问题&#xff0c;同…

Android问题

这里面要加入 ,加入前是点击待君登录直接跳回手机主界面了 加入上述代码即可 Android之Inflate() Inflate()作用就是将xml定义的一个布局找出来&#xff0c;但仅仅是找出来而且隐藏的&#xff0c;没有找到的同时并显示功能。 android上还有一个与Inflate()类似功能的…

《异常检测——从经典算法到深度学习》23 TimesNet: 用于常规时间序列分析的时间二维变化模型

zz# 《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Don…

el-table动态增加列、行数据,俩种方法实现按需选择

需求&#xff1a; 表格数据过多的时候&#xff0c;需要实现动态选择数据的功能&#xff0c;有俩种方法可以按需选择&#xff0c;解决了表格动态选择时闪屏数据抖动问题。 注意&#xff0c;这个添加数据是tableData原本就有的&#xff0c;我做的这个操作类似就是折叠选择展示原有…

解决AssertionError: Torch not compiled with CUDA enabled

运行环境&#xff1a;win10cdua11.0python3.8pytorch2.0.1 报错语句&#xff1a;weights torch.Tensor(TRAIN_DATASET.labelweights).cuda() 报错信息&#xff1a; Exception has occurred: AssertionError Torch not compiled with CUDA enabled 原因&#xff1a;安装的p…

【行云流水线实践】基于“OneBuild”方法对镜像进行快速装箱 | 京东云技术团队

在云原生领域&#xff0c;无论使用哪种编排调度平台&#xff0c;Kubernetes&#xff0c;DockerSwarm&#xff0c;OpenShift等&#xff0c;业务都需要基于镜像进行交付&#xff0c;我们在内部实践“Source-to-image”和链式构建&#xff0c;总而总结出“OneBuild”模式。 其核心…

折纸达珠峰高度(forwhile循环、闭包函数循环)

对折0.1mm厚度的纸张多少次&#xff0c;高度可达珠峰高度8848180mm。 (本笔记适合熟悉循环和列表的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅…