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.rhkb.cn/news/177829.html

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

相关文章

什么?前端又出新轮子了?ofa.js

不需要打包的 MVVM JavaScript 框架 无需繁琐学习&#xff0c;无需 npm、nodejs、webpack&#xff0c;即刻上手 <script src"https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>官方文档 取代 jQuery 在许多小型项目中&#x…

【机器学习合集】模型设计之注意力机制动态网络 ->(个人学习记录笔记)

文章目录 注意力机制1. 注意力机制及其应用1.1 注意力机制的定义1.2 注意力机制的典型应用 2. 注意力模型设计2.1 空间注意力机制2.2 空间注意力模型2.3 通道注意力机制2.4 空间与通道注意力机制2.5 自注意力机制2.5 级联attention 动态网络1. 动态网络的定义2. 基于丢弃策略的…

Debian或Ubuntu静态交叉编译arm和aarch64

Debian或Ubuntu静态交叉编译arm和aarch64 介绍术语ARM架构前置条件从源代码编译一个简单的C程序configure和make交叉编译关于静态链接和依赖关系使用 musl libc 实现与 configure 和 make 进行交叉编译 ARM 正在获得越来越多的关注&#xff0c;并且越来越受欢迎。直接在这些基于…

深度学习_3 数据操作之线代,微分

线代基础 标量 只有一个元素的张量。可以通过 x torch.tensor(3.0) 方式创建。 向量 由多个标量组成的列表&#xff08;一维张量&#xff09;。比如 x torch.arange(4) 就是创建了一个1*4的向量。可以通过下标获取特定元素&#xff08;x[3]&#xff09;&#xff0c;可以通…

Web3时代:探索DAO的未来之路

Web3 的兴起不仅代表着技术进步&#xff0c;更是对人类协作、创新和价值塑造方式的一次重大思考。在 Web3 时代&#xff0c;社区不再仅仅是共同兴趣的聚集点&#xff0c;而变成了一个价值交流和创新的平台。 去中心化&#xff1a;超越技术的革命 去中心化不仅仅是 Web3 的技术…

Linux进程概念(1)

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容为进程的概念做铺垫&#xff0c;主要介绍冯诺依曼体系结…

Pycharm安装jupyter和d2l

安装 jupyter: jupyter是d2l的依赖库&#xff0c;没有它就用不了d2l pycharm中端输入pip install jupyter安装若失败则&#xff1a; 若网速过慢&#xff0c;则更改镜像源再下载&#xff1a; pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ pip …

【ElasticSearch系列-03】ElasticSearch的高级句法查询Query DSL

ElasticSearch系列整体栏目 内容链接地址【一】ElasticSearch下载和安装https://zhenghuisheng.blog.csdn.net/article/details/129260827【二】ElasticSearch概念和基本操作https://blog.csdn.net/zhenghuishengq/article/details/134121631【二】ElasticSearch的高级查询Quer…

Mac之NVM|通过brew安装、更新、卸载、重新安装nvm

文章目录 导文通过brew安装NVM通过brew更新NVM通过brew卸载NVM通过brew重新安装NVM 导文 Mac之NVM 通过brew安装、更新、卸载、重新安装 通过brew安装NVM brew install nvm通过brew更新NVM brew upgrade nvm通过brew卸载NVM brew uninstall nvm通过brew重新安装NVM brew re…

快手协议算法最新版

快手的协议分析是指对快手算法系统进行分析&#xff0c;以了解其推荐内容和个性化用户体验的机制。 然而&#xff0c;一般来说&#xff0c;协议分析的目标是理解算法系统中各个组成部分的功能和作用&#xff0c;以及它们之间的相互关系。以下是一些常见的分析方向&#xff1a;…

Python 自动化(十六)静态文件处理

准备工作 将不同day下的代码分目录管理&#xff0c;方便后续复习查阅 (testenv) [rootlocalhost projects]# ls day01 day02 (testenv) [rootlocalhost projects]# mkdir day03 (testenv) [rootlocalhost projects]# cd day03 (testenv) [rootlocalhost day03]# django-admi…

springboot--多环境配置快速切换开发、测试、生产环境

多环境配置快速切换开发、测试、生产环境 前言1、使用1.1指定环境Profile({"dev","test"})Spring Profiles 提供一个隔离配置的方式&#xff0c;使其仅在特定环境生效 任何Component,Configuration或ConfigurationProperties 可以使用Profile标记&#xff…

损失函数总结(十四):RMSELoss、LogCosh Loss

损失函数总结&#xff08;十四&#xff09;&#xff1a;RMSELoss、LogCosh Loss 1 引言2 损失函数2.1 RMSELoss2.2 LogCosh Loss 3 总结 1 引言 在前面的文章中已经介绍了介绍了一系列损失函数 (L1Loss、MSELoss、BCELoss、CrossEntropyLoss、NLLLoss、CTCLoss、PoissonNLLLos…

【2021集创赛】Risc-v杯一等奖:自适应噪声环境的超低功耗语音关键词识别系统

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 团队介绍 参赛单位&#xff1a;东南大学 队伍名称&#xff1a;Hey Siri 指导老师&#xff1a;刘波 参赛队员&#xff1a;钱俊逸、张人元、王梓羽 总决赛奖项&#xff1a;全国一等奖 摘要…

Redis高可用(主从复制,哨兵,集群)

Redis主从复制 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点&#xff08;Master&#xff09;&#xff0c;后者称为从节点&#xff08;slave&#xff09;&#xff1b;数据的复制是单向的&#xff0c;只能由主节点到从…

OpenGL ES相关库加载3D 车辆模型

需求类似奇瑞的这个效果&#xff0c;就是能全方位旋转拖拽看车&#xff0c;以及点击开关车门车窗后备箱等 瑞虎9全景看车 (chery.cn) 最开始收到这个需求的时候还有点无所适从&#xff0c;因为以前没有做过类似的效果&#xff0c;后面一经搜索后发现实现的方式五花八门&#xf…

sqli 靶场 Level23-Level30 wp

level-23 &#xff08;注释被过滤&#xff09; 抓包&#xff0c;查看正常请求和响应。 略 尝试是否存在注入 id1’,id1’&#xff0c;成周期性变化 尝试 POC POC: id1andextractValue(1,concat(0x7e,user()))-- 结果&#xff1a;failed。怀疑–被过滤掉了&#xff0c;尝试…

深度学习实战:基于TensorFlow与OpenCV的手语识别系统

文章目录 写在前面基于TensorFlow与OpenCV的手语识别系统安装环境一、导入工具库二、导入数据集三、数据预处理四、训练模型基于CNN基于LeNet5基于ResNet50 五、模型预测基于OpenCV 写在后面 写在前面 本期内容&#xff1a;基于TensorFlow与OpenCV的手语识别系统 实验环境&…

PFMEA详解结构分析——Sun FMEA软件

FMEA从1949年诞生到今天已经发生过多次更新&#xff0c;最新版本是2019年6月发布的《AIAG VDA FMEA手册》。新手册借鉴了AIAG的方框图、参数图、流程图等工具的运用&#xff0c;也借鉴了VDA的五步过程导向法&#xff0c;并在此基础上头尾各增加一步&#xff0c;形成了FMEA七步法…

云原生安全日志审计

记得添加&#xff0c;把配置文件挂载进去 - mountPath: /etc/kubernetes/auditname: audit-policyreadOnly: true.....- hostPath:path: /etc/kubernetes/audit/type: DirectoryOrCreatename: audit-policy/etc/kubernetes/manifests/kube-apiserver.yaml 具体配置文件如下 a…