关于javascript:Vue-部署后强制客户端刷新获取最新的代码资源纯前端

56次阅读

共计 1410 个字符，预计需要花费 4 分钟才能阅读完成。

背景：本人的我的项目修复了 bug；然而客户端没有刷新浏览器；导致还是有 bug 的资源代码；呈现了问题
思路：联合 Vue 部署后怎么强制客户端刷新获取最新的代码资源？外面的计划；分 3 步曲实现生产环境部署后资源刷新

vue 我的项目中的 package.json 中存储以后打包资源的以后版本号
搁置最新的版本号 jsonversion.json（以此为准）；放到 public 文件中搁置 webpack 进行打包编译；并且保护一个辅助字段 must 代表是否必须强制刷新；以后默认 bug 级别才会强制刷新；优化和新性能不必强制刷新

在公共组件或者全局办法中；建设 10 秒一次的轮询定时器去轮询 version.json 文件；并且和本地资源的 package.json 比照；我是放到了 layout.vue 组件内；因为除了 login 页面；其余页面都是装在 layout 内的；所以也能够了解为全局组件。
获取两个版本号
- 零碎内的
- 最新的（应用 axios.get 获取；留神：设置 axios 不走缓存）
- 输入成果

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