vue項目經常遇到的Error: Loading chunk * failed


vue項目隨着代碼量、業務組件、路由頁面等的豐富,出於性能要求考慮不得不使用代碼分割技術實現路由和組件的懶加載,這看似沒什么問題

當每次通過npm run build構建生產包並部署到服務器后,操作頁面就經常會遇到點擊無反應、路由已跳轉但頁面沒動靜或頁面錯亂等情況,此時打開控制台會看到報錯信息Error: Loading chunk * failed.當我們嘗試刷新頁面后一切恢復正常,這是因為每次npm run build之后,打包文件的文件名hash值&模塊ID發生變化,瀏覽器緩存的文件與服務器上的文件不一致導致模塊加載失敗

解決方案:

可以配置打包腳本,給打包文件的文件名加上時間戳,避免瀏覽器的緩存

build/webpack.prod.conf.js

vue.config.js

然后vue-router提供了路由錯誤處理函數onError,捕獲路由跳轉時發生的錯誤,可以捕獲到異步動態組件加載失敗的錯誤,做相應處理

 


免責聲明!

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



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