bug背景
一個(gè)vue2項(xiàng)目汤锨,在多部手機(jī)測(cè)試都o(jì)k糙及,唯獨(dú)一部vivo手機(jī)上(Android版本為7.1.2)打開(kāi)首頁(yè)是白屏模孩;
定位原因
因?yàn)槭俏倚录恿艘粋€(gè)頁(yè)面后導(dǎo)致的問(wèn)題优床,首先想到的就是我的代碼有兼容問(wèn)題劝赔;
1)通過(guò)vconsole看到錯(cuò)誤信息是打包后的某個(gè)chunk文件加載失敗。(如圖1)
2)通過(guò)該chunk文件找到源文件胆敞,猜測(cè)是用了一些es6的語(yǔ)法導(dǎo)致的着帽,通過(guò)看打包后的代碼驗(yàn)證了猜測(cè)(如圖2),因?yàn)榇虬骯sync和展開(kāi)運(yùn)算符仍然存在移层,那就是babel沒(méi)有對(duì)其進(jìn)行Polyfill
那接下來(lái)就是看為啥沒(méi)轉(zhuǎn)譯仍翰;
3)通過(guò)userAgent查看一下瀏覽器版本,發(fā)現(xiàn)Chrome版本是55观话,emmmm...有點(diǎn)低予借;(如圖3)
4)通過(guò)MDN查看async和展開(kāi)運(yùn)算符的瀏覽器支持情況(如圖4),async/await频蛔,是剛好踩著及格線灵迫,支持到55,pass
再來(lái)看展開(kāi)運(yùn)算符(如圖5)
看紅色框里晦溪,也沒(méi)問(wèn)題瀑粥,到46版本呢;
然而三圆。狞换。
往下面一看,綠色部分才是問(wèn)題所在舟肉,我恰恰用的就是對(duì)象展開(kāi)修噪。。路媚。黄琼,而對(duì)象展開(kāi)是從60版本后才支持,大于測(cè)試機(jī)的55版本整慎;定位到問(wèn)題脏款,那就開(kāi)始解決
解決問(wèn)題
1)首先通過(guò)項(xiàng)目根目錄下執(zhí)行npx browserslist
,查看篩選后兼容的瀏覽器(如圖6)
由.browserslistrc配置文件可知院领,確實(shí)沒(méi)兼容到Chrome 55版本
所以,更改該文件
> 1%
last 2 versions
not dead
Chrome > 55
打包部署够吩,完美解決比然!