前端发版通知的实现

1.package.json node ./version.js

 "build:test": "vite build --mode test && node ./version.js",

2.根目录创建version.js（往根目录下创建version.json文件并写入version信息）

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

function getRootPath(...dir) {
  return path.resolve(process.cwd(), ...dir);
}
const runBuild = async () => {
  try {
    // 根据实际产物调整 OUTPUT_DIR
    const OUTPUT_DIR = 'dist/agency-pc';
    const VERSION = 'version.json';
    const versionJson = {
      version: `V_${Date.now()}`,
    };
    // 在产物根目录创建version.json文件,并写入json对象（含有version信息）
    fs.writeFileSync(getRootPath(`${OUTPUT_DIR}/${VERSION}`), JSON.stringify(versionJson));
    console.log(`version file is build successfully!`);
  } catch (error) {
    console.error(`version build error:\n${error}`);
    process.exit(1);
  }
};
runBuild();
console.log('build > 文件执行结束！');

3.新建 checkVersion.js，axios读取根目录下version.json版本信息，并和本地存储的版本信息做比较

import axios from 'axios';

export const getAppVersion = () => {
  return localStorage.getItem('agency-pc-version');
};

export const setAppVersion = version => {
  localStorage.setItem('agency-pc-version', version);
};

export async function checkVersion() {
  // 根据实际情况执行
  if (!import.meta.env.PROD) {
    return;
  }
  const url = `/agency-pc/version.json?t=${Date.now()}`;
  let res = null;
  try {
   // 获取执行build命令新建的资源
    res = await axios.get(url);
  } catch (err) {
    console.error('checkAppNewVersion error: ', err);
  }
  const version = res?.data?.version;
  if (!version) return;
  const localVersion = getAppVersion();
  setAppVersion(version);
  if (localVersion && localVersion !== version) {
    ElMessageBox.confirm(
      '亲爱的用户，系统检测到有新的更新已发布。为了确保您获得最佳体验和最新的功能，请点击‘立即刷新’按钮以加载新版本。',
      '版本更新通知',
      {
        confirmButtonText: '立即更新',
        cancelButtonText: '稍后手动刷新',
        type: 'warning',
      }
    ).then(() => {
      window.location.reload();
    });
  }
}

4.在main.js（刷新场景提示）或者路由前置/后置钩子调用（路由跳转场景提示）