vue3+vite纯前端实现自动触发浏览器刷新更新版本内容，并在打包时生成版本号文件

🕗 发布于 2024-12-11 11:59 前端

前言

在前端项目中，有时候为了实现自动触发浏览器刷新并更新版本内容，可以采取一系列巧妙的措施。我的项目中是需要在打包时候生成一个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 文件，如果有，先删除掉，再重新创建一个<script> 标签并赋值，值为最新版本号（时间戳）。

了解fs模块

开始之前先了解下fs模块吧，本文会使用到。

fs 通常是指 Node.js 中的 fs 模块，它是文件系统模块（File System
module）的简写。 这个模块允许你与文件系统进行交互，包括读取、写入、修改、删除文件等操作 。在 Node.js 中，fs模块是内置的核心模块之一，因此 无需额外安装即可使用。
fs 模块提供了丰富的 API 来处理文件和目录，包括同步和异步的操作方式。在使用 fs 模块时，需要特别注意错误处理，因为文件操作可能会涉及到磁盘访问和系统资源，因此 处理错误非常重要。

其中的 fs.writeFile() 方法用于异步地将数据写入文件。其基本语法如下：

fs.writeFile(file, data, options, callback)

参数说明：

file（必需）：表示要写入的文件的路径（包括文件名）。

data（必需）：表示要写入文件的数据，可以是字符串或者 Buffer 对象。

options（可选）：一个对象，包含指定如何写入文件的选项。常用选项包括：encoding：指定文件的编码，默认为 ‘utf8’。 mode：指定文件的权限，默认为 0o666（可读写）。 flag：指定文件的打开行为，默认为 ‘w’（覆盖写入）。

callback（可选）：写入操作完成后的回调函数，通常以 (err)形式接收一个可能的错误参数。如果未提供回调函数，则返回一个 Promise。

使用解释：

fs.writeFile() 方法将 data 写入到指定的 file 中。如果文件不存在，则会创建该文件；如果文件已存在，则会完全覆盖原有内容。
是异步的，意味着它会立即返回并且不会阻塞后续的代码执行；如果需要在写入文件后执行某些操作，可以使用回调函数或者 Promise。
若要进行文件写入操作，通常建议先检查是否有写入权限，并且考虑错误处理以确保应用程序的稳定性。

上面纯前端实现的做法，相对来说比较简单，实现的方式还有很多，比如自定义一个plugin插件 vite实现前端项目打包更新通知用户更新
使用WebSocket实时通信、前端轮询接口检测版本更新等等。感兴趣的可以继续搜资料看。

创建 build.ts 文件

src/utils/文件夹下创建 build.ts文件

// build.ts
import pkg from '../../package.json'
import { resolve } from 'path'
import fs from 'fs'

const version = new Date().getTime()
const content = `getVersion(${version})`

// 创建版本文件
fs.writeFile(`${resolve(__dirname, '../../dist')}/version.js`, content, (err) => (err ? console.log(err) : console.log('版本文件创建成功')))

export const run = () => {
  console.log(`${pkg.name} - build successfully!`)
}

如果上面这种node提示报错的话，可替换为下面这种

import pkg from '../../package.json'
import fs from 'fs'
import { fileURLToPath, URL } from 'node:url'

const version = new Date().getTime()
const content = `getVersion(${version})`

// 创建版本文件
fs.writeFile(fileURLToPath(new URL('../../dist/version.js', import.meta.url)), content, (err) =>
    err ? console.log(err) : console.log('版本文件创建成功')
)
export const run = () => {
    console.log(`? ${pkg.name} - build successfully!`)
}
run()

在package.json文件中配置执行 npm run build 时执行的任务

命令行安装 esno，esno是一个基于 esbuild 的 TS/ESNext 的 Node.js 运行时。

npm install esno

在package.json的build命令上加一行执行 esno ./src/utils/build.ts

{
   "name": "ceshi",
   "version": "1.0.0",
   "scripts": {
      "dev": "vite --force",
      "build": "vite build && esno ./src/utils/build.ts"
    }
}

创建 version.ts 文件

src/utils/文件夹下创建 version.ts文件

import Cookies from 'js-cookie'
import { ElLoading } from 'element-plus'

const versionKey = 'version-id'

export function getVersionId() {
    return Cookies.get(versionKey) ? Number(Cookies.get(versionKey)) : 0
}

export function setVersionId(version: number) {
    return Cookies.set(versionKey, String(version))
}

export function removeVersionId(version: number) {
    Cookies.remove(versionKey)
}

export function handleVersion() {
    if (process.env.NODE_ENV !== 'development') {
        window.getVersion = (version: number) => {
            if (!getVersionId() || (getVersionId() * 1 && version * 1 !== getVersionId() * 1)) {
                ElLoading.service() // 启动全屏ElLoading
                location.reload() // 刷新页面
            }
            setVersionId(version) // 保存 以便下次使用判断
        }
    }
}

export function insertVersionFile() {
    if (process.env.NODE_ENV !== 'development') {
        const scriptCollection = document.getElementsByTagName('script')
        // 判断是否已经有version.js 文件，如果有，先删掉资源引入
        // const scriptAry =[...scriptCollection] // ie不支持这种写法（HTMLCollection 不是数组）
        const scriptAry = Array.from(scriptCollection)
        scriptAry.some((v) => {
            const flag = v.src.indexOf('version.js') !== -1
            if (flag) {
                v.parentNode?.removeChild(v)
            }
            return flag
        })

        const versionScript = document.createElement('script')
        versionScript.src = import.meta.env.VITE_BASE_PATH + 'version.js?v=' + new Date().getTime()
        //document.getElementsByTagName('script')表示返回当前页面中所有 <script> 元素的集合
        const s = document.getElementsByTagName('script')[0]  
        s.parentNode?.insertBefore(versionScript, s)
    }
}
handleVersion()

router =》index.ts 中在前置路由，插入并且检查版本号

在路由跳转时进行实时的版本检测，本质就是在路由拦截器去做这个操作。

import { insertVersionFile } from '/@/utils/version'

const router = createRouter({
    history: createWebHashHistory(),
    routes: staticRoutes,
})

router.beforeEach((to, from, next) => {
    // 插入并且检查版本号
    insertVersionFile()
    NProgress.configure({ showSpinner: false })
    NProgress.start()
    if (!window.existLoading) {
        loading.show()
        window.existLoading = true
    }
    next()
  })
  
export default router

具体来说，在路由的全局前置守卫中进行版本检查，当触发路由跳转时，先执行版本检查的操作。
如果是生产环境，判断是否已经有 version.js 文件，如果有，先删掉资源引入；然后创建一个<script>标签，并设置 src 值；页面中当前第一个 <script> 元素之前插入一个新的 <script>，从而加载并执行。
通过这样的方式，能够及时地发现版本更新并实现页面的自动更新，提升用户体验和项目的维护便利性。

最终

执行 npm run build 命令行打包项目，最终dist文件夹里多了一个文件 version.js。
此时版本号文件就生成了，并且每次打包后这个文件的内容都不一样。

在这里插入图片描述

最后 f12 查看 dom 结构，我们每次进入路由版本号因为是时间戳，所以都会更新。

在这里插入图片描述

注意事项

1）报错

import pkg from '../../package.json' 时候，可能会有标红提示报错找不到模块“../../package.json”。请考虑使用 "--resolveJsonModule" 导入带 ".json" 扩展的模块；

通常是因为在当前的 Node.js 环境中，默认不支持直接导入 .json 文件作为模块。如果在 TypeScript 项目中使用 import 导入 .json 文件，需要在 tsconfig.json 文件中启用 resolveJsonModule 选项，通过设置 “resolveJsonModule”: true，TypeScript 将会允许导入 .json 文件。

{
    "compilerOptions": {
        "resolveJsonModule": true,
        "esModuleInterop": true  // 如果需要的话，也需要启用这个选项
    }
}

2） window.getVersion

这是自定义的函数并将其绑定到 window 对象上，需要在项目中新建 types文件夹，新增一个global.d.ts 文件，写入下面代码，才不会标红提示。

interface Window {
    getVersion: Function
}

另外，如果我们想全局定义一个type类型，可直接在这个文件中定义，就可以全局使用该类型了，比如下面代码，

// 在 TypeScript 中非常有用，特别是当需要处理结构不固定、属性名称和类型不确定的对象时,对象里可以是任意类型，不受属性类型的严格限制
interface anyObj {
    [key: string]: any
}

可参考：
纯前端实现监控版本更新
 vite实现前端项目打包更新通知用户更新
 前端打包同时版本号自增
 如何优雅的实现前端版本投产自动触发浏览器刷新更新版本内容

原文地址：https://blog.csdn.net/m0_74823963/article/details/144386364

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：2024年华中杯数学建模C题基于光纤传感器的平面曲线重建算法建模解题全过程文档及程序
下一篇：深入解析C#中的ArrayList、装箱和拆箱

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14