問題描述:
項目在低版本的手機上或著其他瀏覽器上(比如 ie),打不開济炎,直接顯示空白柄冲,報錯為語法錯誤。
顯示詳情:
解決步驟:
- 因為是低版本的兼容性問題妻导,那首先就做一些js的低版本適配涌攻。
安裝babel-polyfill【(npm)[https://babeljs.io/docs/en/babel-polyfill]】:Babel默認只轉換新的JavaScript語法(syntax)欧引,如箭頭函數(shù)等,而不轉換新的API恳谎,比如Iterator维咸、Generator、Set惠爽、Maps癌蓖、Proxy、Reflect婚肆、Symbol租副、Promise等全局對象,以及一些定義在全局對象上的方法(比如Object.assign)都不會轉碼较性;因此我們需要polyfill用僧;
安裝es6-promise【(npm)[https://www.npmjs.com/package/es6-promise]】:這是ES6 Promise的polyfill结胀,一般用來解決在ie9,10责循,11運行環(huán)境下存在的異步兼容性問題糟港。
======>問題依舊存在
- 乖乖定位錯誤。
根據(jù)sourceMap能打開源代碼院仿,顯示錯誤的地方秸抚。
因為項目是打包后文件,在ie中點開語法錯誤歹垫,展開的內容就是一堆打包編譯后的剥汤,錯誤就無法定位了。
所以我們需要在vue.config.vue 文件中設置:productionSourceMap: true,
之后在google瀏覽器中查看排惨,舉個例子(不是本次的錯誤原因吭敢,只是舉個栗子):
本次項目是用的vue-cli腳手架,可以在官方文檔中查看一下關于SourceMap的配置:
但是:
======>ie好像不支持腳手架的這種改法暮芭,依舊無法看到源碼鹿驼,故問題依舊存在。
-
繼續(xù)定位錯誤
這次只能從入口文件入手辕宏,一步一步排查畜晰,直到找到錯誤的地方。
-
(1)簡化app.vue文件匾效。
ie顯示依舊慘兮兮。
(2) app.vue都沒進去扫步,那就在main.js里面注釋代碼魔策,估計是引入的某個依賴ie不支持?
就有了河胎,把app.vue還原闯袒,哈,進入工程了:
然后游岳。政敢。。胚迫。一系列排除操作喷户,
竟然是
Vue.use(Toast).use(Indicator).use(Dialog).use(Previewer)
這一行。
當時我就迷茫了访锻,但是搜到網上有ie不識別element-ui關鍵字的解決辦法比如這個褪尝,我就漲知識了闹获。
-
求助大佬:
了解到我們項目用的是老版本的hips種子工程,那個時候工程還沒有做低版本的適配河哑,于是大佬幫忙避诽,他檢查了之后修改了一些配置。
ok璃谨。
======>重新yarn install沙庐,重新啟動項目,問題解決~~~睬罗。