vue3 vite 实现版本更新自动刷新

在Vue3和Vite中实现版本更新自动刷新的方法下：

1. 配置Vite插件：在vite.config.js文件中，可以使用versionUpdatePlugin插件来实现版本更新自动刷新。该插件可以在每次打包生产代码时，在public目录下生成一个version.json版本信息文件，并将版本号定义为全局变量__APP_VERSION__。同时，该插件还可以监控版本迭代更新，并在页面跳转时，通过请求服务器端的version.json文件和浏览器本地缓存的版本号进行对比，从而实现页面自动更新。

// vite.config.js
import { defineConfig } from 'vite'
import versionUpdatePlugin from './versionUpdatePlugin'

export default defineConfig((config) => {
  const now = new Date().getTime()

  return {
    define: {
      __APP_VERSION__: now, // 定义全局变量__APP_VERSION__
    },
    plugins: [
      // 使用versionUpdatePlugin插件
      versionUpdatePlugin({
        version: now,
      }),
    ],
    // 其他配置项...
  }
})

2. 创建versionUpdatePlugin插件：在项目根目录下创建一个名为versionUpdatePlugin.js的文件，并在该文件中定义versionUpdatePlugin插件。

// versionUpdatePlugin.js
export default function versionUpdatePlugin(options) {
  return {
    name: 'version-update-plugin',
    apply: 'build',
    generateBundle(_, bundle) {
      const version = options.version
      const versionInfo = {
        version: version,
      }
      const versionJson = JSON.stringify(versionInfo)

      // 在public目录下生成version.json文件
      this.emitFile({
        type: 'asset',
        fileName: 'version.json',
        source: versionJson,
      })

      // 其他操作...
    },
  }
}

通过以上配置，每次打包生产代码时，会在public目录下生成一个version.json文件，并将版本号定义为全局变量__APP_VERSION__。在页面跳转时，可以通过请求服务器端的version.json文件和浏览器本地缓存的版本号进行对比，从而实现页面自动更新。