快捷導(dǎo)航

vue3提示用戶版本更新方式

更新時間：2024年12月26日 14:56:00 作者：張小偉i

本文介紹了如何在項目中創(chuàng)建和使用自定義插件,以在構(gòu)建過程中檢查版本號,具體步驟包括在項目根目錄下創(chuàng)建buildLifeHook.ts文件,并在public目錄下創(chuàng)建version文件夾,然后在vite.config.ts中引用該插件,并在src/utils目錄下創(chuàng)建XxzUtils.ts文件

vue3提示用戶版本更新

1.項目根目錄下創(chuàng)建myPlugins/buildLifeHook.ts

在public下創(chuàng)建version文件夾

buildLifeHook.ts代碼

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

// 在Vite配置中添加一個插件，監(jiān)聽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('構(gòu)建開始！' + now);
    },
    buildEnd() {
      let now = new Date().toLocaleString().replace(/\//g,'-')
      // console.log('構(gòu)建完成！' + now);
    },
  };
}

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

3.在src/utils下創(chuàng)建XxzUtils.ts

XxzUtils.ts中代碼

/**
 * 版本更新
 */
/**
 * @description 檢測版本更新
 * @param allowIgnore 是否允許忽略
 * @param timer 傳入定時器
 * @returns
 */
export async function checkUpdate(allowIgnore: boolean, timer?: any) {
  //動態(tài)獲取線上的資源地址，其實(shí)就是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)
}