详细说明Vue项目加载区块{n}失败问题的解决方案

最近，一个Vue项目中偶尔会出现加载区块{n}失败的错误，该错误来自于webpack溢出代码后，部分捆绑文件的延迟加载失败。但是这个问题的根本原因还没有找到，因为这个问题出现的几率太高了，有的手机会出现，有的不会，使用模拟器不会出现，使用真机又会出现。不知道是网络原因还是网络包bug。在github，stackoverflow等地方没有原因和解决方案。这是github中关于这个问题的讨论：加载区块{n}失败#742。虽然最后还是丢了，可以参考一下。

这个问题出现的概率比较小，但是一旦出现就会导致页面崩溃，所以必须要解决。以下是我的解决方案：

我的想法是，既然找不到错误的原因，我就尝试捕捉这个错误并进行容错处理。实现这一点有两种方法，一种是在服务器端捕获这个错误，另一种是在前端捕获它。

服务器端实现

错误的原因是没有找到一些js包，所以服务器在收到获取js文件的请求时，首先判断js文件是否存在，如果存在，则直接返回js文件，如果不存在，则向前端返回提示消息，供前端处理。假设服务器使用express作为静态文件服务器，代码如下：

app.all(/\。js$/，(req，RES)={ const fileName=req . path . slice(req . path . last indexof('/')1)；const file path=path . resolve(_ _ dirname，'。/public/static/js/' FIlename)；if(fs . existssync(file path)){ fs . sendfile(file path)；} else { RES . setheader(' Content-Type '，' application/JavaScript；charset=UTF-8 ')RES . setheader(' Accept-Ranges '，' bytes') res.setHeader('Vary '，' Accept-Encoding ')RES . setheader(' Transfer-Encoding '，' chunked ')RES . setheader(' Last-Modified '，new Date()。toutstring())RES . setheader(' Cache-Control '，' no-Cache ')RES . send(' window . serverebuildhook window . serverebuildhook()；') }});找不到js文件时，通过RES . send(' window . server rebuildhook window . server rebuildhook()；'发送)向前端返回一条消息，并执行前端定义的serverRebuildHook方法。

然后我们在前端实现serverRebuildHook方法：

window . serverrebuildhook=function(){ alert('服务器版本已更新，正在刷新本地缓存，请稍候.');location . replace(location . href)；}方法很简单，提示用户更新服务器并再次刷新当前页面。

这个实现是指github上的答案，比较繁琐，用户体验不好。它只能刷新当前页面，但不能跳转到目标页面。

前端实现

由于项目中使用了vue-router，vue-router的错误处理功能onError能否捕捉到错误？我们来看看官方文件描述：

在呈现路由期间尝试解析异步组件时出错。完全符合我们场景，因此我们在onError方法中实现了以下代码：

router.onError((错误)={ const pattern=/Loading chunk(\ d)失败/g；const isChunkLoadFailed=error . message . match(模式)；const TargetPath=router . history . pending . full PATH；if(isChunkLoadFailed){ router . replace(TargetPath)；}});当捕获到Loading chunk {n}失败错误时，我们重新呈现目标页面，这显然更简单、更友好。

将来，如果发现加载区块{n}失败的根本原因，本文将再次更新。请注意！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。