网络日志

Vue 部署后强制客户端刷新获取最新的代码资源【纯前端】

背景:自己的项目修复了bug;但是客户端没有刷新浏览器;导致还是有bug的资源代码;出现了问题思路:结合Vue 部署后怎么强制客户端刷新获取最新的代码资源?里面的方案;分3步曲实现生产环境部署后资源刷新

1. 建立对比文件

  • vue项目中的package.json中存储当前打包资源的当前版本号
  • 放置最新的版本号jsonversion.json(以此为准);放到public文件中放置webpack进行打包编译;并且维护一个辅助字段must代表是否必须强制刷新;当前默认bug级别才会强制刷新;优化和新功能不用强制刷新

2. 获取对比文件

  • 在公共组件或者全局方法中;建立10秒一次的轮询定时器去轮询version.json文件;并且和本地资源的package.json对比;我是放到了layout.vue组件内;因为除了login页面;其他页面都是装在layout内的;所以也可以理解为全局组件。
  • 获取两个版本号

    • 系统内的
    • 最新的(使用axios.get获取;注意:设置axios不走缓存
    • 输出效果

3. 开始对比并且后续逻辑

  • layout.vue组件的created函数内;开启一个每10秒一次的轮询请求;旨在对比新老版本号是否一致并且是否需要刷新
  • 如果符合刷新要求;则开始交互刷新(用户可能在提交表单或者保存重要信息);所以给用户一个刷新的过程提示他要刷新了

    // 刷新逻辑
    reloadNotifier() {
        let time = 20
        const key = `open${Date.now()}`
        this.$notification.open({
          message: '系统提示',
          description: `系统版本有更新,请尽快保存当前信息!将在${time}秒后刷新浏览器!`,
          duration: null,
          icon: <a-icon type="alert" style="color: #108ee9" />,
          closeIcon: <span></span>,
          btn: h => {
            return h(
              'a-button',
              {
                props: {
                  type: 'primary'
                },
                on: {
                  click: () => window.location.reload()
                }
              },
              '立即刷新'
            );
          },
          key
        })
        // 动态修改倒计时
        this.notificationTimer = setInterval(() => {
          time--
          if (time < 1) {
            window.location.reload()
            clearInterval(this.notificationTimer)
            this.$notification.close(key)
          }
          this.$notification.open({
            message: '系统提示',
            description: `系统版本有更新,请尽快保存当前信息!将在${time}秒后刷新浏览器!`,
            duration: null,
            icon: <a-icon type="alert" style="color: #108ee9" />,
            closeIcon: <span></span>,
            btn: h => {
              return h(
                'a-button',
                {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => window.location.reload()
                  }
                },
                '立即刷新'
              );
            },
            key
          });
        }, 1000)
      }
  • 展示效果
写在最后:此方案成本相对较小;不需要后端的配合就可以完成;以后的迭代中可拓展性也丰富。