这种报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。
当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 完全符合我们场景,所以在onError方法中我们实现如下代码:
1、服务端解决方式
报错的原因是某些js bundle没有被找到,所以在服务端接收到获取该js文件的请求时先判断该js文件是否存在,如果存在直接返回js文件,如果不存在则返回一个提示信息给前端,让前端处理。假设服务端用express作为静态文件服务器,代码如下:
app.all(/\.js$/, (req, res) => {
const fileName = req.path.slice(req.path.lastIndexOf('/') + 1);
const filePath = path.resolve(__dirname, './public/static/js/' + fileName);
if (fs.existsSync(filePath)) {
fs.sendFile(filePath);
} 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().toUTCString())
res.setHeader('Cache-Control', 'no-cache')
res.send('window.serverRebuildHook && window.serverRebuildHook();')
}
});
当js文件未找到时,通过res.send(‘window.serverRebuildHook && window.serverRebuildHook();’)向前端返回一条消息,并执行前端定义的serverRebuildHook方法。
接着我们在前端实现serverRebuildHook方法:
window.serverRebuildHook = function () {
alert('服务器版本已更新,正在刷新本地缓存,请稍后...');
location.replace(location.href);
}
2、前端解决方式
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明:
当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 完全符合我们场景,所以在onError方法中我们实现如下代码:
router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
router.replace(targetPath);
}
});