Unexpected token < [duplicate] 线上发版，页面报错，点不动问题描述，报错app.6

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