纯前端vue项目实现版本更新（纯代码教程）

第一步（版本信息生成文件）

新建 versionUpdatePlugin.ts 文件

javascript 复制代码

// versionUpdatePlugin.ts文件
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);
        });
      }
    }
  };
};

第二步（配置文件）

修改vite.config文件 只贴入部分配置代码

javascript 复制代码

  // vite.config.ts
  // 引入版本号生成代码
   import versionUpdatePlugin from '@/src/utils/versionUpdatePlugin';
   
   export default defineConfig(({ command }) => {
     //获取当前时间戳作为版本信息
     //这里的值你们也可以不用时间戳作为唯一值 也可以获取系统版本号 作为版本差异值
     const now = new Date().getTime();
     return {
        define: {
          // 定义全局变量
          __APP_VERSION__: now
        },
        plugins: {
          //   版本更新插件
          versionUpdatePlugin({
              version: now
          }),
        }
   
   })

第三步（router文件）

修改router文件 (你配置路由守卫的那个文件)

typescript 复制代码

declare const __APP_VERSION__: string; //如果有ts代码警告 上面就声明一下这个值
// 版本监控 （此代码随便贴入那个ts文件）
const versionCheck = async (to) => {
  if (import.meta.env.VITE_NODE_ENV === 'development') return;
  const response = await axios.get('/version.json');
  if (__APP_VERSION__ !== response.data.version) {
    const key = 'updatable';
    //此弹窗插件使用antd组件 你也可以修改增加取消等事件操作
    Modal.info({
      title: '📢 发现新的版本，请及时更新',
      onOk() {
        message.loading({ content: () => '版本更新中...', key });
        setTimeout(() => {
          location.replace(window.location.origin + to.path);
          message.success({ content: '更新成功', key, duration: 2 });
        }, 2000);
      }
    });
  }
};

/**
 * 路由守卫
 */
router.beforeEach(async (to, from) => {
   //未登录操作
    ...
   //动态路由注册 
    ...
   //版本更新
   await versionCheck(to);
});

其他

你可以选择放在任何地方去判断更新，可以不用采取我的方案，放在路由里面去做动态更新，你们也可以在全局错误判断里去让用户感知版本更新，等等等方案。

后面我会看看pwa解决方案如果你们有更好的版本更新解决方案也可以讨论一下，欢迎👏

纯前端vue项目实现版本更新（纯代码教程）

第一步 （版本信息生成文件）

第二步 （配置文件）

第三步 （router文件）

其他

第一步（版本信息生成文件）

第二步（配置文件）

第三步（router文件）