关于javascript: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)
    }

• 展现成果

写在最初：此计划老本绝对较小；不须要后端的配合就能够实现；当前的迭代中可拓展性也丰盛。