vue3 解决项目更新，需要用户手动刷新，防止js引用异常导致报错的问题

首先

在项目根目录里新建version-update.ts

//version-update.ts
import type { ResolvedConfig } from 'vite'
const fs = require('fs')
const path = require('path')
const writeVersion = (
  versionFile: string, 
  content: string
) => {
 // 写入文件
  fs.writeFile(versionFile, content, (err: any) => {
    if (err) 
      throw err
  })
}
const version = Math.random().toString(32).substring(2, 15)
export default () => {
  let config: ResolvedConfig
  return {
    name: 'version-update',
    configResolved(resolvedConfig: ResolvedConfig) {
      // 存储最终解析的配置
      config = resolvedConfig
    },
    buildStart() {
      // 生成版本信息文件路径
      const file = config.publicDir + path.sep + 'version.json'
      // 这里使用编译时间作为版本信息
      const content = JSON.stringify({ version })
      if (fs.existsSync(config.publicDir)) {
          writeVersion(file, content)
      } else {
        fs.mkdir(config.publicDir, (err: any) => {
          if (err) 
            throw err
          writeVersion(file, content)
        })
      }
    }
  }
}

之后

在vite.config.ts引入使用

import versionUpdate from './version-update'
export default defineConfig({
  plugins: [
    versionUpdate()
  ],
})

记得在tsconfig.node.json里配置include

否则会报——“文件 "xxx" 不在项目 "xxx" 的文件列表中”的错误

{
  "include": ["version-update.*"],
}

实现上述步骤之后

每次打包项目之后，都会在public文件夹下创建version.json文件

{"version":"fjuvp4fmps8"}

最后只要在app.vue里

每隔10秒检测localStorage的版本是否和public文件里的version版本相同，不同就刷新页面即可

import axios from "axios"
import { ElMessage } from "element-plus"
const checkVersion = async () => {  
  let localVersion = localStorage.getItem('version')
  const responce = await axios.get('version.json')
  let version = responce.data.version
  if(localVersion  == version)
    return
  ElMessage({
    message: '发现新内容，自动更新中...',
    type: 'success',
    duration: 1500,
    onClose: () =>
      window.location.reload()
  })
}
let timer = setInterval(
  () => checkVersion(),
  10000
)
checkVersion()