vue 版本迭代更新自动刷新清缓存

已于 2022-03-11 10:28:01 修改
阅读量6.8k 收藏 25
点赞数 3
文章标签： vue.js javascript 前端
于 2022-03-11 10:23:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43934420/article/details/123418104
版权
本文介绍了前端项目中实现缓存更新的三种方法：1) 文件名添加时间戳防止缓存；2) 创建version.json存储版本号；3) 使用路由导航守卫检查并刷新页面。这些策略确保了每次版本更新时，用户能够获取到最新的静态资源。
摘要由CSDN通过智能技术生成

方案：
1.每次构建打包文件输出时，给文件名加上时间戳，确保每次版本更新的文件名不一样，用于清缓存（文件：vue.config.js）
在这里插入图片描述
2.项目静态文件存储更新迭代的版本号，每次版本更新时，修改版本号（项目public目录下新建文件：version.json）
在这里插入图片描述
3.通过路由导航守卫监听localStorage存储的版本号，是否与更新后的静态文件版本号相同，如不同，则进行刷新页面操作，配合1步骤，就可以清缓存（文件：main.js versionUpdate.js）
在这里插入图片描述main.js
在这里插入图片描述
versionUpdate.js

DudleyLi
关注
在js或css后加?v= 版本号不让浏览器缓存
09-28
2. **刷新缓存**：更常见的情况是，版本号用于强制浏览器忽略其缓存并获取最新版本的文件。每当开发者更新js或css文件时，他们会增加版本号。这样，用户在下次访问网站时，浏览器会因为版本号的改变而重新下载文件，...
vue项目版本更新后文件存在缓存问题解决方案(vue-cli2.0&vue-cli3.0)
大灰狼的小绵羊哥哥的博客
02-22 1827
vue项目版本更新后文件存在缓存问题解决方案(vue-cli2.0&vue-cli3.0)
vue 部署线上（版本更新）自动清除浏览器缓冲
niuniu2878499107的博客
08-20 1717
vue 部署线上（版本更新）自动清除浏览器缓冲
vue项目打包部署后 浏览器自动清除缓存问题（解决方法）
最新发布
锦瑟年华L的博客
10-11 361
vue项目打包部署后 浏览器自动清除缓存问题
vue项目版本打包更新后文件及浏览器存在缓存问题解决方案
我总是词不达意的博客
12-12 8954
vue项目版本打包更新后文件及浏览器存在缓存问题解决方案
Vue.js 清除页面缓存的方法
2301_79326930的博客
09-26 8942
一种简单的方法是通过修改页面的 URL 来清除缓存。这样，每次 URL 发生变化时，浏览器会重新请求页面，从而达到清除缓存的效果。本文介绍了几种常见的方法来实现这一目标，包括通过修改 URL、使用 Vue Router 导航守卫以及使用 Vue 的。在 Vue.js 开发中，有时候我们需要在页面更新时清除缓存，以确保用户能够看到最新的数据或者 UI 变化。方法，该方法会将当前页面的 URL 修改为包含当前时间戳的新 URL。根据你的项目需求和具体场景，选择适合的方法来清除页面缓存，并提供更好的用户体验。
vue项目打包是配置版本号，实现更新项目自动清除缓存（vue-cli打包方式）
weixin_44694172的博客
12-20 1127
vue项目打包是配置版本号，实现更新项目自动清除缓存（vue-cli打包方式） 本来Vue打包会自动用chunkhash来解决缓存问题，但是部分浏览器不会自动更新，因此通过增加时间戳不同来实现自动重新加载文件，保持最新的界面。 vue-cli打包：修改vue.config.js文件: const Version = new Date().getTime();//使用时间戳来区分版本号 module.exports = { //CSS类 css: { extract: {
vue项目部署，自动清除缓存配置
qq_37916164的博客
06-27 4061
项目打包时给js、css文件加上时间戳，保证输出的文件名不会相同，通过 vue.config.js 进行配置。这样当我们重新部署后访问的时候，由于访问的时候，文件名变了，所以会重新请求，而不是走缓存)该方法了解即可，不推荐使用，会导致用户每次访问程序都需要重新请求服务器，所有静态资源都无法使用缓存，浪费流量，网络压力大。chunkFilename： 指未列在 entry 中，却又需要被打包出来的文件的名称（懒加载的文件）filename： 指列在 entry（入口） 中，打包后输出的文件的名称。
prueba-todolegal：prueba vue
02-12
Vue.js的热重载功能使得修改代码后，浏览器可以无需手动刷新就能看到更新，这对快速迭代和调试非常有帮助。 当项目开发完成后，我们需要将其编译成适合生产环境的版本。运行`yarn build`会执行一系列优化，包括代码...
移动端下拉刷新效果
11-03
3. 使用离线缓存：利用Service Worker和Cache API，可以将部分数据缓存在本地，即使在网络状况不佳的情况下也能快速响应下拉刷新操作。 4. 负载均衡：对于大数据量的列表，可以采用分页加载或无限滚动的方式，每次...
Vue axios获取token临时令牌封装案例
11-19
通过这种方式，每个axios请求在发送前都会自动检查token的有效性，如果需要，会自动刷新token，从而简化了代码复用，并减少了潜在的错误。同时，这种封装方法使得在项目中添加新的请求时无需每次都手动处理token的...
vue3.0-vite-antd 实现动态切换主题.zip
10-29
5. **缓存管理**：为了提高用户体验，可以考虑将用户选择的主题存储在浏览器的localStorage或sessionStorage中，这样在用户下次访问时，可以自动加载上次选择的主题。 6. **代码结构**：项目中的文件"动态切换主题...
vue项目，自动清除浏览器缓存
linlin0629009的博客
09-21 1315
二：在main.js中判断version，本地存的version和本次的version比较，如果不同，就强制清除缓存。一：pages.json中的version版本号，每次打包部署前，改变version。
vue项目每次更新后清除浏览器缓存
weixin_42634040的博客
07-22 3121
vue项目每次更新后清除浏览器缓存
vue打包添加时间戳，实现更新项目自动清除缓存（webpack/vue-cli打包两种方式）
qq_39652099的博客
06-01 1556
本来vue打包会自动用chunkhash来解决缓存问题，但是部分浏览器不会自动更新，因此通过增加时间戳不同来实现自动重新加载文件，保持最新的界面。修改build/webpack.prod.conf.js文件。修改vue.config.js文件。
vue项目打包部署，自动清理缓存
qq_50386946的博客
05-23 3997
1、在 package.json 文件中有个 version 版本号的属性，在每次打包部署前修改当前的版本号。2、在 main.js 中修改版本号，将版本号存在浏览器缓存中，如果版本号不一致，就重新加载。3、给文件名后面添加 hash 值，确保文件名都是最新的，从而清除缓存。4、在 vue.config.js 文件中修改。
Vue打包后自动清除浏览器缓存
weixin_52429122的博客
11-29 973
一、修改根目录index.html1.找到当前项目的index.html页面，并在 head 里面添加下面代码二、打包的文件路径添加时间戳1、找到当前项目的build/webpack.prod.conf.js 文件，配置打包文件三、附代码。
VUE项目版本迭代自动更新当前版本的代码 更新 刷新 自动更新静态文件 reload
热门推荐
a_靖的博客
11-05 1万+
解决思路： 在配置文件写一个版本号，存入缓存，如果版本号低就调用 location.reload() 自动刷新页面
Vue 打包自动清理缓存
sunyanchun的专栏
04-07 707
1、package.json文件中有一个管理版本号属性：version，在我们每次打包部署之前修改当前版本号。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值