最近有个Vue项目中会偶尔出现<代码>加载块{n}失败>
这个问题出现概率比较小但是一旦出现就会导致页面崩溃,所以还是得解决,下面就贴出我的解决方案:
我的思路是既然找不到报错的原因那么尝试去捕获这个错误并做容错处理,有两种实现,一是在服务端捕获这个错误,一个是在前端捕获。
报错的原因是某些js包没有被找的到,所以在服务端接收到获取该js文件的请求时先判断该js文件是否存在,如果存在直接返回js文件,如果不存在则返回一个提示信息给前端,让前端处理。假设服务端用表达作为静态文件服务器,代码如下:
app.all (/\。js/美元(点播,res)=比;{
const文件名=req.path.slice (req.path.lastIndexOf (“/? + 1);
const filePath=路径。解决(__dirname”。/公共/静态/js/+文件名);
如果(fs.existsSync (filePath)) {
fs.sendFile (filePath);
其他}{
res.setHeader(“内容类型”、“应用程序/javascript;utf - 8字符集=')
res.setHeader (“Accept-Ranges”、“字节”)
res.setHeader(“不同”,“接受编码”)
res.setHeader(“传输编码”、“分块”)
res.setHeader (“last - modified”,新的日期().toUTCString ())
res.setHeader (cache - control,“no - cache”)
res.send(“窗口。serverRebuildHook,,window.serverRebuildHook ();”)
}
});
当js文件未找到时,通过<代码> res.send(“窗口。serverRebuildHook,,window.serverRebuildHook();”) 向前端返回一条消息,并执行前端定义的<代码> serverRebuildHook 方法。
接着我们在前端实现<代码> serverRebuildHook 方法:
窗口。serverRebuildHook=function () {
alert('服务器版本已更新,正在刷新本地缓存,请稍后…”);
location.replace (location.href);
}
方法很简单,提示一下用户服务端更新然后重新刷新当前页面。
这种实现是参考github上的回答,相对比较繁琐,而且用户体验并不好,只能刷新当前页面,不能跳转到目标页。
由于项目里面用到了vue-router, vue-router的错误处理函数alt="详解Vue项目中出现加载块{n}失败问题的解决方法">
当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。完全符合我们场景,所以在onError方法中我们实现如下代码:
router.onError(错误)=比;{
const模式=/加载块(\ d) +失败/g;
const isChunkLoadFailed=error.message.match(模式);
const定位路径=router.history.pending.fullPath;
如果(isChunkLoadFailed) {
router.replace(定位路径);
}
});
当捕获到<代码>加载块{n}失败>
后续如果发现了导致<代码>加载块{n}失败>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
