当前位置: 首页 > news >正文

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.lryc.cn/news/218181.html

相关文章:

  • 关于RabbitMQ的小总结
  • webgoat靶场攻关
  • BEV-YOLO 论文学习
  • C++可以使用负数作为下标索引
  • react+canvas实现横跨整个页面的动态的波浪线(贝塞尔曲线)
  • 峰回网关数采PLC
  • Vue+element el-date-picker 时间日期选择器设置默认值,选择框不显示问题(已解决)
  • 数据挖掘题目:根据规则模板和信息表找出R中的所有强关联规则,基于信息增益、利用判定树进行归纳分类,计算信息熵的代码
  • Reshape.XL 1.2 for Excel插件 Crack
  • 开发知识点-PHP从小白到拍簧片
  • 飞书开发学习笔记(二)-云文档简单开发练习
  • 设计模式——命令模式(Command Pattern)+ Spring相关源码
  • [开源]企业级在线办公系统,基于实时音视频完成在线视频会议功能
  • Scala语言用Selenium库写一个爬虫模版
  • ZZ038 物联网应用与服务赛题第I套
  • ClickHouse 学习之基础入门(一)
  • HttpClient基本使用
  • 力扣:150. 逆波兰表达式求值(Python3)
  • Tomcat运行日志乱码问题/项目用tomcat启动时窗口日志乱码
  • Leetcode—199.二叉树的右视图【中等】
  • 微信小程序如何跳转到外部小程序
  • ElasticSearch集群环境搭建
  • [架构之路-250/创业之路-81]:目标系统 - 纵向分层 - 企业信息化的呈现形态:常见企业信息化软件系统 - 企业内的数据与数据库
  • delaunay和voronoi图 人脸三角剖分
  • MySQL数据库之表的增删查改
  • (论文阅读11/100)Fast R-CNN
  • Git 标签(Tag)实战:打标签和删除标签的步骤指南
  • React 底层 Fiber 架构 简单理解
  • 使用 Python 进行自然语言处理第 4 部分:文本表示
  • 【LLM】大语言模型高效微调方案Lora||直击底层逻辑