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

黄粱一梦2023-12-290

兼容低版本谷歌浏览器
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配置之后可以正常展示的浏览器以及版本信息。

普通项目将.browserslistrc配置文件更改为

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

分类:前端Vue

标签:前端vue3

上一篇将另一个项目放在当前vue项目的子路由中下一篇MYSQL如何实现数据的归档操作?

版权声明

本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~

Preview