记一次es6展开运算符（...）浏览器兼容问题
2022-09-21 本文已影响0人
Young_Jeff
bug背景
一个vue2项目，在多部手机测试都ok，唯独一部vivo手机上（Android版本为7.1.2）打开首页是白屏；
定位原因
因为是我新加了一个页面后导致的问题，首先想到的就是我的代码有兼容问题；
1）通过vconsole看到错误信息是打包后的某个chunk文件加载失败。（如图1）
图1
2）通过该chunk文件找到源文件，猜测是用了一些es6的语法导致的，通过看打包后的代码验证了猜测（如图2），因为打包后async和展开运算符仍然存在，那就是babel没有对其进行Polyfill
图2
那接下来就是看为啥没转译；
3）通过userAgent查看一下浏览器版本，发现Chrome版本是55，emmmm...有点低；（如图3）
图3
4）通过MDN查看async和展开运算符的浏览器支持情况（如图4），async/await，是刚好踩着及格线，支持到55，pass
图4
再来看展开运算符（如图5）
看红色框里，也没问题，到46版本呢；
然而。。
往下面一看，绿色部分才是问题所在，我恰恰用的就是对象展开。。。，而对象展开是从60版本后才支持，大于测试机的55版本；定位到问题，那就开始解决
图5
解决问题
1）首先通过项目根目录下执行npx browserslist ，查看筛选后兼容的浏览器（如图6）
图6
由.browserslistrc配置文件可知，确实没兼容到Chrome 55版本
所以，更改该文件
> 1%
last 2 versions
not dead
Chrome > 55
打包部署，完美解决！
