相信大多数前端同事都经历过,页面打包发版后,各种缓存,缓存,缓存等问题,造成的用户页面没有更新。我的都更新了,你的怎么没更新的问题。
网上也有很多文章来介绍如何解决这种问题,这里主要是用了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()
}
}
})
}
})