Vue SPA 如何解决浏览器缓存问题
更新时间：2022年08月03日 09:59:14 作者：前端@小菜
这篇文章主要介绍了Vue SPA 如何解决浏览器缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue SPA 解决浏览器缓存
如何让发布到线上的 vue 单页应用能及时更新到浏览器，而无需用户强制刷新页面呢？
因为 js、css、图片等资源文件名带有 hash 值，只要文件名变了就会更新，所以可以设置缓存，但 html 文件名没有加 hash 值，所以不能缓存该文件。
在 nginx.conf 中设置
location / {
root html/dist;
index index.html index.htm;
if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$) {
expires 100d; # js、css、图片缓存100天(因为文件名有hash)
#add_header Cache-Control "max-age = 8640000"; # 或者设置max-age
}
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control "no-store"; # html不缓存(因为文件名没有加hash)
}
}通过上述配置，让浏览器不缓存 html 文件。
Vue 微信浏览器缓存问题
1.试过js、css打包时添加时间戳，因为打包后每次都是新名字的文件，所以感觉加不加时间戳都没有效果 试了一下果然
原因应该是微信浏览器缓存了index.html, 所以打开缓存的页面根本没有任何请求
2.试过index.html添加meta标签，设置不缓存页面，亲测也无效
3.index.html 试过添加参数，本以为微信浏览器会认为是一个新页面， 但是无果
4.js 间隔时间自动刷新window.location.href 体验不好，还是去掉了
5.既然前端试了很多种办法 还是无效，只能在服务端配置了，
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}这句话应该也是让index.html不缓存，尝试了下，这种办法没有兼容问题，安卓和ios每次打开页面都及时更新了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
这篇文章主要介绍了在Vue项目中使用jsencrypt.js对数据进行加密传输的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
vue生成token保存在客户端localStorage中的方法
本篇文章主要介绍了vue生成token保存在客户端localStorage中的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了vue大屏展示适配，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
下面小编就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue中qs插件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家介绍了Vue2 模版指令元素绑定事件执行顺序解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue同个按钮控制展开和折叠同个事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在现代前端开发中,自定义引入依赖是提升开发效率的关键,unplugin-auto-import插件可以帮助开发者自动引入JS模块,包括本地编写的工具方法和第三方库,通过简单的配置,开发者可以实现Vue基本库、本地文件以及第三方插件的自动引入2024-10-10
本文主要介绍了Electron+Vue3+Vite搭建桌面应用的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了Vue通过ref获取dom元素属性的方法,文中有详细的方法介绍,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
最新评论