背景

前端代码发布后，如何及时的通知用户， 让用户刷新？ 避免使用旧功能，体验新功能

方案

采用 vite构建生成时间戳+ 接口调用的方式

vite构建,记录时间

在生产构建的时候， 通过writeFileSync 方式生成一个文件，里面内容为构建的时间及版本信息

// VITE_APP_BUILD_TIME 存于app内的构建时间
 process.env.VITE_APP_BUILD_TIME = Date.now().toString()
// 写入第三方文件的构建时间（每次构建会被覆盖）
writeFileSync(`${process.cwd()}/public/build-time`, `build-time=${Date.now().toString()}\r\nversion=${process.env.npm_package_version}`)

接口调用 + 触发事件

每个项目不同， 在vue项目中可以在全局router.beforeEach中增加接口调用

router.beforeEach((to, from, next) => {
   fetch(`./build-time?t=${Date.now()}`, {}).then(() =>{
       //...
       // 拿到结果后,进行事件触发
       mitt.emit(name, res)
   )
}

全局注册mitt

app.config.globalProperties.$EventBus = mitt

事件响应

proxy?.$EventBus.on(name, content => {
    // 对比时间, content.time为构建时间, VITE_APP_BUILD_TIME为app内的构建时间
    if(content.time - +import.meta.env.VITE_APP_BUILD_TIME > 10){
        // 打开右下角提示更新弹窗
    }
})

结束

以上把更新方式的关键流程进行了说明， 具体细节可以根据需求自定义开发， 总体流程大概都是这样