vue項目隨着代碼量、業務組件、路由頁面等的豐富,出於性能要求考慮不得不使用代碼分割技術實現路由和組件的懶加載,這看似沒什么問題
當每次通過npm run build構建生產包並部署到服務器后,操作頁面就經常會遇到點擊無反應、路由已跳轉但頁面沒動靜或頁面錯亂等情況,此時打開控制台會看到報錯信息Error: Loading chunk * failed.當我們嘗試刷新頁面后一切恢復正常,這是因為每次npm run build之后,打包文件的文件名hash值&模塊ID發生變化,瀏覽器緩存的文件與服務器上的文件不一致導致模塊加載失敗
解決方案:
可以配置打包腳本,給打包文件的文件名加上時間戳,避免瀏覽器的緩存
build/webpack.prod.conf.js
vue.config.js
然后vue-router提供了路由錯誤處理函數onError,捕獲路由跳轉時發生的錯誤,可以捕獲到異步動態組件加載失敗的錯誤,做相應處理