Vue SPA 如何解决浏览器缓存问题

目录
  • Vue SPA 解决浏览器缓存
  • Vue 微信浏览器缓存问题

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每次打开页面都及时更新了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue封装一个TodoList的案例与浏览器本地缓存的应用实现

    Vue封装一个TodoList的案例与浏览器本地缓存的应用实现

    本文主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现,分享给大家,具体如下: 使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段. 浏览器本地缓冲: 前提: 一般我们定义的变量,或者用Vuex保存的数据, 当浏览器进行了一个刷新 那么这个数据就会丢失, 这样就做不出历史记录的效果了, 但是, 使用浏览器缓存就可以帮助我们解决这个问题- 浏览器缓存分为二种 sessionStorage 和 localStorage, 二种原型链分别如下:

  • vue多次打包后出现浏览器缓存的问题及解决

    vue多次打包后出现浏览器缓存的问题及解决

    目录 vue多次打包后出现浏览器缓存 解决方案 使用hash解决vue浏览器的缓存 缓存问题 怎么解决缓存问题 解决办法 vue多次打包后出现浏览器缓存 每次打包更新版本上传到服务器上,会偶尔出现代码没有更新还是旧代码的逻辑,这就代表浏览器存在缓存的问题了. 解决方案 vue-cli2 webpack .prod.conf.js 下修改output const  Timestamp = new Date().getTime(); output: {     path: config.build.

  • 详解vue服务端渲染浏览器端缓存（keep-alive）

    在使用服务器端渲染时,除了服务端的接口缓存.页面缓存.组建缓存等,浏览器端也避免不了要使用缓存,减少页面的重绘. 这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的使用 假如现在我们有两个页面,home.vue 和 about.vue home.vue <template> <div> home </div> </template> <script> export default { name: Home, c

  • 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机

  • vue 部署上线清除浏览器缓存的方式

    vue 部署上线清除浏览器缓存的方式

    目录 部署上线清除浏览器缓存 修改根目录index.html 配置 nginx 不缓存 html 打包的文件路径添加时间戳 vue项目部署,清理缓存方式 部署上线清除浏览器缓存 vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存.这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存. 下面是我的解决方案: 修改根目录index.html 在 head 里面添加下面代码 <meta http-equiv="pragram" content=&

  • vue项目中禁用浏览器缓存配置案例

    vue项目中禁用浏览器缓存配置案例

    项目发布版本会遇到经常需要清理缓存的问题,以下是项目禁用缓存的实际方法 1.public文件夹中修改 index.html文件meta配置 <meta http-equiv="pragram" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" /> &l

  • Vue SPA 如何解决浏览器缓存问题

    目录 Vue SPA 解决浏览器缓存 Vue 微信浏览器缓存问题 Vue SPA 解决浏览器缓存 如何让发布到线上的 vue 单页应用能及时更新到浏览器,而无需用户强制刷新页面呢? 因为 js.css.图片等资源文件名带有 hash 值,只要文件名变了就会更新,所以可以设置缓存,但 html 文件名没有加 hash 值,所以不能缓存该文件. 在 nginx.conf 中设置         location / {             root html/dist;            

  • Vue如何解决每次发版都要强刷清除浏览器缓存问题

    目录 每次发版都要强刷清除浏览器缓存问题 原理 vue 强制清除浏览器缓存 (1)最基本的方法就是 (2)在html文件中加入meta标签 (3)需要后端陪着,进行nginx配置 (4)在脚本加载时加入一个时间戳 每次发版都要强刷清除浏览器缓存问题 原理 将打包后的js和css文件,加上打包时的时间戳 1.index.html 在 public 目录下的index.html文件里添加如下代码: <meta http-equiv="pragram" content="no

  • vue spa应用中的路由缓存问题与解决方案

    vue spa应用中的路由缓存问题与解决方案

    单页面应用中的路由缓存问题 通常我们在进行页面前后退时,浏览器通常会帮我们记录下之前滚动的位置,这使得我们不会在每次后退的时候都丢失之前的浏览器记录定位.但是在现在愈发流行的SPA(single page application 单页面应用)中,当我们从父级页面打开子级页面,或者从列表页面进入详情页面,此时如果回退页面,会发现之前我们浏览的滚动记录没有了,页面被置顶到了最顶部,仿佛是第一次进入这个页面一样.这是因为在spa页面中的url与路由容器页面所对应,当页面路径与其发生不匹配时,该页面组件

  • Vue+element 解决浏览器自动填充记住的账号密码问题

    我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就很难受了,有一种不受控制的感觉 不行,我的代码必须由我控制,下面是解决方案: 解决方法:只需要在每个input框前面加一个input,同时将其隐藏,就ok了,账号那个需要放在下面,原因不详... 总结 以上所述是小编给大家介绍的Vue+element 解决浏览器自动填充记住的账号密码问题,希望对大家有所帮助,如

  • 快速解决Vue项目在IE浏览器中显示空白的问题

    vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import  "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu

随机推荐