-
问题描述,报错 app.6fbc22d5.js:1 Uncaught (in promise) ChunkLoadError: Loading chunk 14 failed
-
是由于webpack拆分包,打包出来js是带有hash值得。如果用户已经登录,本地已经知道,需要按需加载的js路径地址。但此时服务重新发版,会导致打包出来的hash值会有变化。用户使用旧的资源去请求。导致加载不到资源,服务器会返回登陆的html。
-
导致页面点击没反应抛错。
-
-
SyntaxError, 此类异常一旦发生,导致整个js文件都无法执行,所以点击页面没反应
-
-
解决方案
-
-
减少发版次数
-
减少缓存,或者token失效时间。
-
webpack 打包的时候,增加js?id=[hash]
-
-
解决加载不到,抛错。
-
但是不会加载最新资源,需要用户手动刷新,就好了
-
-
捕获异常,重新加载页面(终极解决方案)
-
-
直接上代码
-
因为是vue项目,点击新页面会根据页面加载相应的拆分js,所以js抛错,也会传导到router里。
-
所以没有自定义监听错误处理错误
-
如果发生此类错误,直接执行reload。刷新页面,获取最新的js。
-
这样既不阻塞页面,又不让用户有多余的操作,或者刷新,就可以自动获取最新代码。nice
-
-