Vue Router懶加載報錯問題解決方案

場景：vue項目路由改成了懶加載方式，清空項目文件，重新下載配置運行后，就發現控制台報以下錯誤，刷新頁面后，就不會再報錯，應該使用路由懶加載后，組件加載異常導致的。另外，因為項目里用了懶加載，每次重新build之后有修改過的文件哈希碼會改變，導致路由跳轉到有修改過的頁面會報頁面文件404。

以下錯誤：

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

查閱Vue Router文檔，有個錯誤處理函數onError，用於處理路由異常情況：

router.onError(callback)

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

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

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

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

解決方案：

渲染一個路由的過程中，需要嘗試解析一個異步組件時發生錯誤。
這種情況想來應該是符合咱們的錯誤情況，因為刷新頁面后，就不會報錯，所以假設錯誤預想成立，那么下一步，我們在onError方法中，重新加載我們的目標頁面，應該就可以解決問題。

/* 路由異常錯誤處理，嘗試解析一個異步組件時發生錯誤，重新渲染目標頁面 */
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);
  }
});