vue3+vite纯前端实现自动触发浏览器刷新更新版本内容,并在打包时生成版本号文件
前言
在前端项目中,有时候为了实现自动触发浏览器刷新并更新版本内容,可以采取一系列巧妙的措施。我的项目中是需要在打包时候生成一个
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 时执行的任务
在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/weixin_45811256/article/details/140626731
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!