Force the client to refresh to get the latest code resources after Vue is deployed [pure front-end]

Background: I fixed the bug in my own project; but the client did not refresh the browser; it still resulted in buggy resource code; there was a problem Thought: How to force the client to refresh to get the latest code resources after Vue is deployed? The scheme inside; realize resource refresh after production environment deployment in 3 steps

1. Create a comparison file

• The current version number of the current packaged resource is stored in the package.json in the vue project
  
• Put the latest version number json version.json (whichever is the case); put it in the public file and place webpack for packaging and compilation; and maintain an auxiliary field must representative Whether it must be forced to refresh; the current default bug level will be forced to refresh; optimization and new features do not need to be forced to refresh
  

2. Get the comparison file

• In a public component or a global method; establish a polling timer every 10 seconds to poll the version.json file; and compare with the local resource package.json ; I put it in layout.vue Inside the component; because except for the login page; other pages are installed in the layout; so it can also be understood as a global component.

• Get two version numbers

  • within the system
    
  • The latest (use axios.get to get it; note: setting axios does not go to the cache )
    
  • output effect
    

3. Start the comparison and follow the logic

• In the created function of the layout.vue component; open a polling request every 10 seconds; to compare whether the old and new version numbers are consistent and whether they need to be refreshed
  

• If it meets the refresh requirements; start interactive refresh (the user may be submitting a form or saving important information); so give the user a refresh process to prompt him to refresh

   // 刷新逻辑
  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)
    }

• Display of results
  

Written at the end: the cost of this solution is relatively small; it can be completed without the cooperation of the back-end; the scalability is also rich in subsequent iterations.