Vue開發中出現Loading?Chunk?Failed的問題如何解決

本文小編為大家詳細介紹“Vue開發中出現Loading Chunk Failed的問題如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue開發中出現Loading Chunk Failed的問題如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

報錯現象

某天測試反應在點擊頁簽的時候出現了 Loading Chunk Failed 的錯誤，經過本人百度分析后判斷是異步組件在發包時舊資源被替換的問題，然后一通CV操作之后發現問題還是存在，于是便有如下探究。

發生原因

用戶在發包前進入了頁面（也就是請求到了 index.html ），并且在 index.html 中可以得知將來要請求的異步組件的名字叫 a.js ，當服務器這時候發包，并且清空掉了 a.js 這個資源，改名叫 a1.js 。發包之后用戶點擊 a.js 對應的組件時，瀏覽器拿著先前在 index.html 得知的 a.js 這個名字去服務器請求資源就得到了以上的 Loading Chunk Failed 報錯。

正常的生產上線流程可能存在靜態資源和頁面分屬不同服務器,應該是先全量部署靜態資源（各種js，css，圖片），不清空舊資源，然后再部署頁面。但如果清空掉舊資源就可能導致報錯。

如果在測試環境中可能會采取清空覆蓋掉舊資源，這個時候就必須要前端進行控制了。

解決思路

• 在監聽到路由報錯的時候，前端強制刷新頁面，重新獲取index.html和對應的靜態資源路徑。

• 設置preFetch，網絡空閑的時候就請求資源，可以大幅降低報錯的幾率。

觸發bug

想要解決問題首先就是得復現問題，涉及到發包上線的測試和驗證都有點小尷尬，因此提供下個人思路

• 最直接的就是你開個頁面，然后控制臺網絡禁用掉緩存，然后發包后進入其他異步組件觸發bug。

• 如果想要觸發 onError 這個鉤子的話，直接斷開 devServer 就可以了。

• 本地復現的話就是開個本地服務器，然后進入頁面，把 dist 文件夾中對應的js文件刪去即可觸發。

代碼實現

 /* 正則使用'\S'而不是'\d' 為了適配寫魔法注釋的朋友，寫'\d'遇到魔法注釋就匹配不成功了。
  * 使用reload方法而不是replace原因是replace還是去請求之前的js文件，會導致循環報錯。
  * reload會刷新頁面， 請求最新的index.html以及最新的js路徑。
  * 直接修改location.href或使用location.assign或location.replace，和router.replace同理， 
  * 在當前場景中請求的依然是原來的js文件，區別僅有瀏覽器的歷史棧。因此必須采用reload.
  * reload()有個特點是當你在A頁面試圖進入B頁面的時候報錯，會在A頁面刷新，因此在刷新后需要手動書寫邏輯
  * 進入B頁面，可以在router.onReady()方法里面書寫
  * 為了避免在特殊情況下服務器丟失資源導致無限報錯刷新，做了一步控制，僅嘗試一次進入B頁面，
  * 如果不成功就只刷新A頁面，停留在當前的A頁面。
  */
 
 
 router.onError((error) => {
   const jsPattern = /Loading chunk (\S)+ failed/g
   const cssPattern = /Loading CSS chunk (\S)+ failed/g
   const isChunkLoadFailed = error.message.match(jsPattern || cssPattern)
   const targetPath = router.history.pending.fullPath
   if (isChunkLoadFailed) {
     localStorage.setItem('targetPath', targetPath)
     window.location.reload()
   }
 })
 
 router.onReady(() => {
   const targetPath = localStorage.getItem('targetPath')
   const tryReload = localStorage.getItem('tryReload')
   if (targetPath) {
     localStorage.removeItem('targetPath')
     if (!tryReload) {
       router.replace(targetPath)
       localStorage.setItem('tryReload', true)
     } else {
       localStorage.removeItem('tryReload')
     }
   }
 })

讀到這里，這篇“Vue開發中出現Loading Chunk Failed的問題如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。