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)
    }

• 展示效果
  

写在最后：此方案成本相对较小；不需要后端的配合就可以完成；以后的迭代中可拓展性也丰富。