vue 版本发布 在线跟新用户操作解决方案

因本司更新迭代的速度很快，有时候更改一个BUG就要马上更新版本，就会引起用户在应用当中，页面点击无反应的情况出现。

解决方案有两种：

1.window.addEventListener('error')监听页面是否更新版本，判断js或css报错时，强制刷新页面，就可以正常使用了。

index.html  入口文件

<script>
    window.addEventListener('error', handleListenerError, true);
    function handleListenerError(eventErr) {
      console.log(eventErr);
      
      if (eventErr.srcElement.localName == 'script') {
        alert('因版本更新，页面需重新载入');
        // window.location.reload();
      }
      eventErr.preventDefault()
    }
  </script>

2.vue-router的错误处理函数 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) {
    alert('因版本更新，页面需重新载入');
    window.location.reload();
    // router.replace(targetPath);
  }
});

当捕获到Loading chunk {n} failed的错误时我们重新渲染目标页面，这种实现明显更简单和友好。