一、需求

有时候遇到客户反馈一个问题但是本地又复现不了，其中一个原因可能就是缓存作祟，尤其是使用vue开发的单页面系统，在发布新版本后，如果用户没有主动刷新页面，则会一直在旧版本上使用，导致出现各种异常现象。为了避免这种情况就需要在新版本发布后通知用户刷新页面。

二、思路

webpack+vue2打包后会生成类似这样的script标签：

<script src=js/app.f87244e0.js></script>

1

vite+vue3打包后会生成类似这样的script标签：

<script type=module crossorigin src=/assets/index.0dba465d.js>

1

每次打包都会生成不同的随机值，那么我们通过比较这行script标签的字符串就能知道是否发布了新版本

三、实现

这里以Vue3为例，定义一个判断新旧标签的函数

function reloadPage() {
  // 拿出存在本地的旧标签
  const oldVersion = localStorage.getItem('scriptVersion')
  // fetch方式可以请求本地文件
  fetch('./index.html').then(res => res.text()).then((res)=>{
    // 通过正则拿到所有script标签
    const reg = new RegExp(/<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/ig)
    const scriptList = res.match(reg)
    for (let i = 0; i < scriptList.length; i++) {
      const item = scriptList[i]
      // 找出生成的script标签
      if (item && item.includes('<script type=module crossorigin src=/assets/index.')) {
        console.log(item)
        if (oldVersion) {
          // 与本地旧标签的做判断
          if (oldVersion == item) {
            console.log('没有更新')
          } else {
            console.log('版本更新了')
            localStorage.setItem('scriptVersion', item)
            // 你可以弹窗提示告诉用户更新了或者直接刷新
            location.reload()
          }
        } else {
          // 没有保存本地的旧标签说明是第一次进入页面
          localStorage.setItem('scriptVersion', item)
        }
      }
    }
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

接下来就是多久循环一次以及在哪里循环的事了。
有些系统几个小时没操作就会退出登录，用户需要跳转到登录页重新登录，这种情况建议在登录页调用该方法，免去了循环读取文件的操作。晚上更新后，用户上午打开登录页就可以确定是最新版本了。

onMounted(() => {
  reloadPage()
})

1
2
3

如果需要在所有页面都调用该方法，则在pubilc文件夹下的index.html需要循环调用即可：

setInterval(() => {
  reloadPage()
}, 1000 * 60 * 5)

1
2
3

简单的判断是否发布新版本

发表评论

共0条评论