vue3+vite进行版本检查，实现版本更新后自动刷新

前情

前端版本更新后，平台页面内容还是旧的，需要手动刷新后才展示最新的内容，这降低了用户的体验感。为了解决这个问题，需要对版本进行对比。在路由跳转时进行版本比较，如果是同一版本就继续操作，不是则刷新页面。

实现

refreshPlugin.js

// src/plugins/refreshPlugin.js

    import path from "path";
    import fs from "fs";

    // 将文本内容写入指定文件中
    const writeVersion = async (versionFile, content) => {
      fs.writeFile(versionFile, content, (err) => {
        if (err) throw err;
      });
    };

    export default (options) => {
      // 声明配置文件路径
      let configPath;
      return {
        name: "refreshVersion",
        configResolved(resolvedConfig) {
          // 保存配置文件的路径，后用
          configPath = resolvedConfig.publicDir;
        },
        async buildStart() {
          // 生成版本信息文件路径
          const file = configPath + path.sep + "version.json";
          // 采用编译的当前时间作为每个版本的标识
          const content = JSON.stringify({ version: options.version });
          if (fs.existsSync(configPath)) {
            // 如果文件路径已存在，直接写入文件
            writeVersion(file, content);
          } else {
            // 如果文件路径不存在，先创建文件夹，然后再写入文件
            fs.mkdir(configPath, (err) => {
              if (err) throw err;
              writeVersion(file, content);
            });
          }
        },
      };
    };

versionCheck.js

    // 版本比对，全局缓存的版本 与 版本号文件读取结果 不同时，说明有新版本
    export const versionCheck = async () => {
      if (process.env.NODE_ENV === 'development') return
       //   从响应数据中获取版本号
      const response = await axios.get('version.json')
      //获取上一个保存的版本号
      const localVersion = localStg.get('version')
      //判断本地存储是都存储了版本号并且和上一个是否一致
      if (localVersion && localVersion !== response.data.version) {
        localStg.set('version', response.data.version)
        window.location.reload()
      } else {
        localStg.set('version', response.data.version)
      }
    }

vite.config.ts

 import refreshPlugin from './src/plugins/refreshPlugin.js'
 const now = new Date().getTime(); // 定义一个时间戳
 export default defineConfig(configEnv => {
     return {
            define: {
                'import.meta.env.VITE_APP_VERSION': now,
            },
            plugins:[
                refreshPlugin({
                    version: now
                })
            ]
     }
})

在打包时将当前时间戳作为版本号写入version.json文件中。执行pnpm build后会在dist文件夹下生成version.json文件。

路由判断

    router.afterEach(async to => {
        await versionCheck()
    })

这里没有在beforEach中判断是避免用户当前在默认页面，点击其他页面时检测到版本变化进行刷新重新回到默认页面，需要再点一次才跳转到想去的页面，这样在交互上不是很好。