vue3+vite 实现版本更新监控

此文章只列出代码流程  具体使用出现代码问题欢迎评论交流 主打一个简单高效

实现效果图

1、新建版本监控插件

// versionUpdatePlugin.js
import fs from 'fs';
import path from 'path';

const writeVersion = (versionFile, content) => {
  // 写入文件
  fs.writeFile(versionFile, content, (err) => {
    if (err) throw err;
  });
};

export default (options) => {
  let config;

  return {
    name: 'version-update',
    configResolved(resolvedConfig) {
  
      config = resolvedConfig;
    },

    buildStart() {
      // 生成版本信息文件路径
      const file = config.publicDir + path.sep + 'version.json'; // 这里使用编译时间作为版本信息
      const content = JSON.stringify({ version: options.version });

      if (fs.existsSync(config.publicDir)) {
        writeVersion(file, content);
      } else {
        fs.mkdir(config.publicDir, (err) => {
          if (err) throw err;
          writeVersion(file, content);
        });
      }
    }
  };
};

2、vite.config文件引入插件

//目录自己定义储存位置
## 引入

import versionUpdatePlugin from '****/versionUpdatePlugin';

## 使用方法

export default defineConfig(() => {
  const now = new Date().getTime();
  return {
    define: {
      // 定义全局变量
      __APP_VERSION__: now
    },
    plugins: [
      vue(),
      //   版本更新插件
      versionUpdatePlugin({
        version: now
      })
    ]
  };
});

ps: 这里只挑出该插件引入方式 自己要根据自己文件作出相应配置

3、路由钩子配置 找到路由文件

/**
 * 路由守卫
 */
router.beforeEach(async (to, from) => {

 //自己处理的一些逻辑 比如登陆鉴定


  await versionCheck(to);
});

// 版本监控 
const versionCheck = async (to) => {
  if (import.meta.env.VITE_NODE_ENV === 'development') return;
  const response = await axios.get('/version.json');

 //此处代码自己根据自己业务处理方式 这里使用antv控件做出对应选择
  if (__APP_VERSION__ !== response.data.version) {
    const key = 'updatable';
    Modal.info({
      title: '📢 发现新的版本，请及时更新',
      onOk() {
        message.loading({ content: () => '版本更新中...', key });
        setTimeout(() => {
          location.replace(window.location.origin + to.path);
          message.success({ content: '更新成功', key, duration: 2 });
        }, 2000);
      }
    });
  }
};