最近有这样一个需求，客户正在使用页面，这时进行版本更新，客户不退出页面一直操作的都是老的版本，需要提醒客户版本已经更新，使用最新的版本。
因项目使用的是webpack+Vue+elementUI，在webpack打包时添加一个时间戳作为版本号，确保每次打包生成的版本号都不同。

代码

// methods 代码
      getHash() {
        // 在 js 中请求首页地址不会更新页面
        axios.get(`${window.location.origin}${window.location.pathname}index.html?time=${new Date().getTime()}`).then(res=>{
          
          // 返回的是字符串，需要转换为 html 
          let el = document.createElement('html')
          el.innerHTML = res
          
          let spt = el.getElementsByTagName('script')

          // 拿到 hash 
          let new_hash = "" 
          for (let i = 0; i < spt.length; i++) {
            const element = spt[i];
            if(spt[i].src.indexOf('checkhash') !== -1){
              new_hash = spt[i].src.split('.')[spt[i].src.split('.').length-1]
              break;
            }
          }

          if(!this.cur_hash){
            this.cur_hash = new_hash
            return
          }
          // iMessage 是个全局变量（默认值 false），用来帮助判断什么时候会弹出提示，不然定时器就一直弹
          if (new_hash != this.cur_hash && !this.iMessage) {
            // 版本更新，弹出提示
            this.iMessage = true
           
            const h = this.$createElement
            this.$message.success({
              message: h('span', null, [
                h('span', null, '当前版本已更新，请刷新后使用 '),
                h('a', {
                    on: {
                      click: function () {
                        window.location.reload()
                      }
                    },
                    style:'cursor:pointer;color:rgb(22, 96, 199);border-bottom:1px solid;padding: 2px 0'
                  }, '刷新页面')
              ]),
              
              duration: 0,
              showClose: true,
              customClass:'refresh'
            });
          }
        })
	//mounted 代码 
	// 定时器三分钟分钟查询一次
	setInterval(()=>{
        this.getHash()
      },180000)

最终效果