目录报错现象发生原因解决思路触发bug一点思考报错现象 某天测试反应在点击页签的时候出现了 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,图片),不清空旧资源,然后再部署页面。但如果清空掉旧资源就可能导致报错。
如果在测试环境中可能会采取清空覆盖掉旧资源,这个时候就必须要前端进行控制了。
想要解决问题首先就是得复现问题,涉及到发包上线的测试和验证都有点小尴尬,因此提供下个人思路
代码实现
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')
}
}
})
我之前提到过异步组件而不是路由懒加载导致了这个问题的发生,有趣的是,当你子组件是用懒加载方式进行,并且没有设置或者关闭了preFetch,且之前没有缓存。很可能也会报这种错。在网络中和路由懒加载一样是报 404 找不到对应资源,区别就是不会报 loadinGChunkError 的错误。
设置缓存策略中页面一定要对页面( inedx.html )设置no cache no store,避免依然指向旧的已被删除的资源,只有Get方式获取的资源才可以设置缓存策略。
到此这篇关于Vue开发中出现Loading Chunk Failed的问题解决的文章就介绍到这了,更多相关Vue Loading Chunk Failed内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue开发中出现Loading Chunk Failed的问题解决
本文链接: https://www.lsjlt.com/news/144357.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0