【Vue】Vue打包文件后需要添加版本号Version,来防止更新后的页面有缓存

在 build/webpack.prod.conf.js 文件里面修改如下:

添加  const Version = new Date().getTime();

并且修改 js 和 css 的打包文件,如下:

打包后的js文件:(css文件同理,后面都会添加上版本号,也就是个时间戳)

--------完。

Vue3和Vite中实现版本更新自动刷新的方法下: 1. 配置Vite插件:在vite.config.js文件中,可以使用versionUpdatePlugin插件来实现版本更新自动刷新。该插件可以在每次打包生产代码时,在public目录下生成一个version.json版本信息文件,并将版本号定义为全局变量__APP_VERSION__。同时,该插件还可以监控版本迭代更新,并在页面跳转时,通过请求服务器端的version.json文件和浏览器本地缓存版本号进行对比,从而实现页面自动更新。 ```javascript // vite.config.js import { defineConfig } from 'vite' import versionUpdatePlugin from './versionUpdatePlugin' export default defineConfig((config) => { const now = new Date().getTime() return { define: { __APP_VERSION__: now, // 定义全局变量__APP_VERSION__ }, plugins: [ // 使用versionUpdatePlugin插件 versionUpdatePlugin({ version: now, }), ], // 其他配置项... } }) ``` 2. 创建versionUpdatePlugin插件:在项目根目录下创建一个名为versionUpdatePlugin.js的文件,并在该文件中定义versionUpdatePlugin插件。 ```javascript // versionUpdatePlugin.js export default function versionUpdatePlugin(options) { return { name: 'version-update-plugin', apply: 'build', generateBundle(_, bundle) { const version = options.version const versionInfo = { version: version, } const versionJson = JSON.stringify(versionInfo) // 在public目录下生成version.json文件 this.emitFile({ type: 'asset', fileName: 'version.json', source: versionJson, }) // 其他操作... }, } } ``` 通过以上配置,每次打包生产代码时,会在public目录下生成一个version.json文件,并将版本号定义为全局变量__APP_VERSION__。在页面跳转时,可以通过请求服务器端的version.json文件和浏览器本地缓存版本号进行对比,从而实现页面自动更新
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬不萌只是酸i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值