背景：本人的我的项目修复了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)  }
  • 展现成果
写在最初：此计划老本绝对较小；不须要后端的配合就能够实现；当前的迭代中可拓展性也丰盛。