vue3提示用户版本更新

1.项目根目录下创建myPlugins/buildLifeHook.ts

   在public下创建version文件夹

 

buildLifeHook.ts代码

import fs from 'fs';
import path from 'path';

// 在Vite配置中添加一个插件，监听build事件
export function buildLifeHook() {
  return {
    name: 'build-life-hook',
    buildStart(){
      let now = new Date().toLocaleString().replace(/\//g,'-')
      let version = {
        version:now,
      }
      let versionPath = path.join(__dirname,'../public/version/versionData.json');
      fs.writeFile(versionPath,JSON.stringify(version),'utf8',(err)=>{
        if(err){
          console.log('写入文件失败',err);
        }else{
          console.log('写入文件成功');
        }
      })
      // console.log('构建开始！' + now);
    },
    buildEnd() {
      let now = new Date().toLocaleString().replace(/\//g,'-')
      // console.log('构建完成！' + now);
    },
  };
}

 

2.在vite.config.ts中引用插件

 

3.在src/utils下创建XxzUtils.ts

 

 XxzUtils.ts中代码

/**
 * 版本更新
 */
/**
 * @description 检测版本更新
 * @param allowIgnore 是否允许忽略
 * @param timer 传入定时器
 * @returns
 */
export async function checkUpdate(allowIgnore: boolean, timer?: any) {
  //动态获取线上的资源地址，其实就是vite.config.ts的base的值
  try {
    // 检测前端资源是否有更新
    let response = await fetch(`/version/versionData.json`, {
      headers: {
        'Cache-Control': 'no-cache'
      }
    }).then(res => res.json())
    if (!localStorage.getItem('JHS_version')) {
      localStorage.setItem('JHS_version', response.version)
    } else {
      if (localStorage.getItem('JHS_version') !== response.version) {
        if (versionUpdateTimer != null) {
          clearInterval(versionUpdateTimer)
        }
        ElMessageBox.confirm(
          '是否刷新页面重新加载最新版?',
          '检测到新版本',
          {
            confirmButtonText: '好的',
            cancelButtonText: '不了',
            type: 'warning',
            showClose: false,
            closeOnClickModal: false
          }
        )
          .then(() => {
            localStorage.setItem('JHS_version', response.version)
            window.location.reload()
          })
      }
    }
  } catch (e) {
    return Promise.reject(e)
  }
}

/**
 * @description 初始化版本检测器
 */
let versionUpdateTimer = null

export function initVersionCheck() {
  versionUpdateTimer = setInterval(() => {
    checkUpdate(true, versionUpdateTimer).then(r => null)
  }, 60000)
}

4.在App.vue文件下调用initVersionCheck()方法