前言
在前端项目中，有时候为了实现自动触发浏览器刷新并更新版本内容，可以采取一系列巧妙的措施。我的项目中是需要在打包时候生成一个version.js文件，用当前打包时间作为版本的唯一标识，然后打包发版 ，从实现对版本更新的监控。
因为项目使用 vite 打包的，vite又是基于rollup打包，rollup不像webpack有contentHash可以实现增量构建；而是每次打包，所有文件的hash都会更新，这样就会导致浏览器缓存的资源失效。
当用户已经打开页面，此时前端重新部署代码发版，会导致index.html未更新，而项目静态资源已经替换。当用户切换路由时，因为按需加载的原因，会继续访问旧的资源。
项目是基于 vue 3.4.21 + vite 4.3.9 + typescript 5.1.3 + node 16.1.0 开发的。
解决思路
- 注入版本信息：通过vite构建打包时，注入一个版本信息的version.js 文件，文件内容是一个版本号（这里用时间戳代替）。
- 定义监控版本函数并执行：定义一个函数并调用执行，该函数内容为生产环境下，从本地缓存中获取版本号，如果没有版本号或者和缓存中的版本号不一致，表示版本已更新。就刷新页面，然后本地存储新的版本号以便下次使用。
- 在合适的时机（路由载入前），判断是否已经有 version.js 文件，如果有，先删除掉，再重新创建一个