Error: Loading chunk * failed,Vue Router懶加載報錯問題解決方案


最近vue項目路由改成了懶加載方式,剛開始並沒有什么問題,清空項目文件,重新下載配置運行后,就發現控制台報以下錯誤:

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

刷新頁面后,就不會再報錯,思來想去應該使用路由懶加載后,組件加載異常導致的,但是究竟是什么原因,暫時不知,有知道的朋友可以留言。
解決方案:
Vue Router中有個錯誤處理函數onError,用於處理路由異常情況,請看說明:

渲染一個路由的過程中,需要嘗試解析一個異步組件時發生錯誤。
這種情況想來應該是符合咱們的錯誤情況,因為刷新頁面后,就不會報錯,所以假設錯誤預想成立,那么下一步,我們在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);
}
});

原文鏈接:https://blog.csdn.net/zhongguohaoshaonian/article/details/95179057


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM