前端页面部署版本更新——vueRouter.onError错误捕获

675 阅读1分钟

相信大多数前端同事都经历过,页面打包发版后,各种缓存,缓存,缓存等问题,造成的用户页面没有更新。我的都更新了,你的怎么没更新的问题。

网上也有很多文章来介绍如何解决这种问题,这里主要是用了vue-router的onError方法,通过监听页面路由间的跳转错误捕获来实现版本更新提示。

简单实现方法

//router/index.js

// 捕获加载js失败
router.onError(error => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  if (isChunkLoadFailed) {
    let vm = new Vue()
    vm.$alert('已发布新版本,建议点确定进行更新!', '操作提示', {
      confirmButtonText: '确定',
      callback: (action) => {
        if (action == 'confirm') {
          window.location.reload()
        }
      }
    })
  }
})

可能对你有帮助

根据每次打包生成script src 的hash值去,轮询对比判断