vue-cli 打包后提交到線上出現 "Uncaught SyntaxError:Unexpected token" 報錯

來源：懂視網責編：小采時間：2020-11-27 22:04:15

vue-cli 打包后提交到線上出現 "Uncaught SyntaxError:Unexpected token" 報錯

vue-cli 打包后提交到線上出現 Uncaught SyntaxError:Unexpected token 報錯:前言: 項目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName實現按需加載. BUG描述:該報錯在項目上線一段時間后,有用戶反映頁面無法正常游覽 (后面以問題1/問題2區分) 問題1.導航點擊無法正常跳轉,console打印:Error:Loading

推薦度：

點擊下載本文 文檔為doc格式

導讀vue-cli 打包后提交到線上出現 Uncaught SyntaxError:Unexpected token 報錯:前言: 項目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName實現按需加載. BUG描述:該報錯在項目上線一段時間后,有用戶反映頁面無法正常游覽 (后面以問題1/問題2區分) 問題1.導航點擊無法正常跳轉,console打印:Error:Loading

問題2.頁面全白,console打印:Uncaught SyntaxError:Unexpected token <

報錯截圖:

經過一番折騰,初步定位問題1在經過build/webpack.prod.conf.js的chunkhash打包后的JS文件hash值會有變更,因為每次更新代碼到線上都會刪除舊的dist目錄,將最新的dist目錄copy上傳提供后臺更新. 在更新代碼的這個過程用戶停留在頁面上,當用戶在更新完后重新操作就會導致報錯

問題1解決方法:捕獲路由報錯. (思路來源:https://www.gxlcms.com/article/147427.htm)

routers.onError((err) => {
 const pattern = /Loading chunk (\d)+ failed/g;
 const isChunkLoadFailed = err.message.match(pattern);
 if (isChunkLoadFailed) {
 let chunkBool = sessionStorage.getItem('chunkError');
 let nowTimes = Date.now();
 if (chunkBool === null || chunkBool && nowTimes - parseInt(chunkBool) > 60000) {//路由跳轉報錯,href手動跳轉
 sessionStorage.setItem('chunkError', 'reload');
 const targetPath = routers.history.pending.fullPath;
 window.location.href = window.location.origin + targetPath;
 }else if(chunkBool === 'reload'){ //手動跳轉后依然報錯,強制刷新
 sessionStorage.setItem('chunkError', Date.now());
 window.location.reload(true);
 }
 }
})

問題2在Network查看js文件加載的時候發現某個js文件Response Headercontent-type異常,正常情況返回content-type: application/javascript. 但是有一個js響應的內容為HTML, js無法識別<符號導致拋出報錯