Vue开发中出现Loading Chunk Failed的问题如何解决

本文小编为大家详细介绍“Vue开发中出现Loading Chunk Failed的问题如何解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue开发中出现Loading Chunk Failed的问题如何解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

报错现象

某天测试反应在点击页签的时候出现了 Loading Chunk Failed 的错误，经过本人百度分析后判断是异步组件在发包时旧资源被替换的问题，然后一通CV操作之后发现问题还是存在，于是便有如下探究。

发生原因

用户在发包前进入了页面（也就是请求到了 index.html ），并且在 index.html 中可以得知将来要请求的异步组件的名字叫 a.js ，当服务器这时候发包，并且清空掉了 a.js 这个资源，改名叫 a1.js 。发包之后用户点击 a.js 对应的组件时，浏览器拿着先前在 index.html 得知的 a.js 这个名字去服务器请求资源就得到了以上的 Loading Chunk Failed 报错。

正常的生产上线流程可能存在静态资源和页面分属不同服务器,应该是先全量部署静态资源（各种js，CSS，图片），不清空旧资源，然后再部署页面。但如果清空掉旧资源就可能导致报错。

如果在测试环境中可能会采取清空覆盖掉旧资源，这个时候就必须要前端进行控制了。

解决思路

• 在监听到路由报错的时候，前端强制刷新页面，重新获取index.html和对应的静态资源路径。

• 设置preFetch，网络空闲的时候就请求资源，可以大幅降低报错的几率。

触发bug

想要解决问题首先就是得复现问题，涉及到发包上线的测试和验证都有点小尴尬，因此提供下个人思路

• 最直接的就是你开个页面，然后控制台网络禁用掉缓存，然后发包后进入其他异步组件触发bug。

• 如果想要触发 onError 这个钩子的话，直接断开 devServer 就可以了。

• 本地复现的话就是开个本地服务器，然后进入页面，把 dist 文件夹中对应的js文件删去即可触发。

代码实现

    router.onError((error) => {   const jsPattern = /Loading chunk (\S)+ failed/g   const cssPattern = /Loading CSS chunk (\S)+ failed/g   const isChunkLoadFailed = error.message.match(jsPattern || cssPattern)   const targetPath = router.history.pending.fullPath   if (isChunkLoadFailed) {     localStorage.setItem('targetPath', targetPath)     window.location.reload()   } })  router.onReady(() => {   const targetPath = localStorage.getItem('targetPath')   const tryReload = localStorage.getItem('tryReload')   if (targetPath) {     localStorage.removeItem('targetPath')     if (!tryReload) {       router.replace(targetPath)       localStorage.setItem('tryReload', true)     } else {       localStorage.removeItem('tryReload')     }   } })

读到这里，这篇“Vue开发中出现Loading Chunk Failed的问题如何解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。