快捷導(dǎo)航

vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò)

更新時(shí)間：2018年11月06日 14:40:13 作者：Sam_Lii

這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言: 項(xiàng)目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName實(shí)現(xiàn)按需加載.

BUG描述:該報(bào)錯(cuò)在項(xiàng)目上線一段時(shí)間后,有用戶反映頁面無法正常游覽 (后面以問題1/問題2區(qū)分)

問題1.導(dǎo)航點(diǎn)擊無法正常跳轉(zhuǎn),console打印:Error:Loading chunk {n} failed.

報(bào)錯(cuò)截圖

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

報(bào)錯(cuò)截圖:

經(jīng)過一番折騰,初步定位問題1在經(jīng)過build/webpack.prod.conf.js的chunkhash打包后的JS文件hash值會(huì)有變更,因?yàn)槊看胃麓a到線上都會(huì)刪除舊的dist目錄,將最新的dist目錄copy上傳提供后臺(tái)更新. 在更新代碼的這個(gè)過程用戶停留在頁面上,當(dāng)用戶在更新完后重新操作就會(huì)導(dǎo)致報(bào)錯(cuò)

問題1解決方法:捕獲路由報(bào)錯(cuò). (思路來源:http://chabaoo.cn/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) {//路由跳轉(zhuǎn)報(bào)錯(cuò),href手動(dòng)跳轉(zhuǎn)
   sessionStorage.setItem('chunkError', 'reload');
   const targetPath = routers.history.pending.fullPath;
   window.location.href = window.location.origin + targetPath;
  }else if(chunkBool === 'reload'){ //手動(dòng)跳轉(zhuǎn)后依然報(bào)錯(cuò),強(qiáng)制刷新
   sessionStorage.setItem('chunkError', Date.now());
   window.location.reload(true);
  }
 }
})

問題2在Network查看js文件加載的時(shí)候發(fā)現(xiàn)某個(gè)js文件Response Headercontent-type異常,正常情況返回content-type: application/javascript. 但是有一個(gè)js響應(yīng)的內(nèi)容為HTML, js無法識(shí)別<符號(hào)導(dǎo)致拋出報(bào)錯(cuò)