遇到 Loading chunk {n} failed問題不要慌

前言

最近在寫個vue的demo,調試過程中出現個問題,vconsole中提示

[vue-router] Failed to resolve async component default:
Error:Loading chunk 10 failed.

大致意思就是路由異步加載組件的時候報錯了

報錯來自於webpack進行code spilt之後某些bundle文件lazy loading失敗。但是這個問題的根本原因沒有被找到，因爲這個問題出現的偶然性太高了，而且有的手機上會出現，有的不會，用模擬器不會出現

實在找不到原因，又因爲是偶發性的所以還是做容錯處理解決該問題

解決方案

• 使用router.onError

具體API地址router.onError

router.onError

router.onError(callback)

註冊一個回調，該回調會在路由導航過程中出錯時被調用。注意被調用的錯誤必須是下列情形中的一種：

1. 錯誤在一個路由守衛函數中被同步拋出；

2. 錯誤在一個路由守衛函數中通過調用 next(err) 的方式異步捕獲並處理；

3. 渲染一個路由的過程中，需要嘗試解析一個異步組件時發生錯誤。

具體解決代碼：

router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  const targetPath = router.history.pending.fullPath;
  if (isChunkLoadFailed) {
    router.replace(targetPath);
  }
});

• 將異步組件改爲同步組件

該方法屬於損失性能從源頭上解決問題，但是不太可取

總結

• 參考至：Vue項目中出現Loading chunk {n} failed問題的解決方法
• 本文首發於遇到 Loading chunk {n} failed問題不要慌