vue项目如何让客户端(缓存)自动更新?

前端项目往往会被浏览器缓存,但是有些突发情况,往往希望这些被缓存的htmljs不要生效,而是去服务端请求最新的htmljs等文件。

场景:公司业务发生变更,希望先尽快关闭掉某个功能,由于后端修改、测试、发布的时候往往需要更长时间,所以先把前端入口屏蔽往往是不错(的应急)的方法,但是由于前端往往被浏览器缓存,所以会导致被屏蔽的功能有些用户不可以使用,而有些用户仍能使用。

那么修改静态的前端文件如何能让那些缓存的客户端失效呢?

前端环境:

vue.jsnginx

回答:

找到了一个办法:参考。但是这样的话html文件就没法利用缓存了 。

引用:

vue-cli里的默认配置,css和js的名字都加了哈希值,所以新版本css、js和就旧版本的名字是不同的,不会有缓存问题。
不过值得注意的是,把打包好的index.html放到服务器里去的时候,index.html在服务器端可能是有缓存的,这需要在服务器配置不让缓存index.html
nginx 配置,让index.html不缓存

    location = /index.html {
        add_header Cache-Control "no-cache, no-store";
    }

no-cache, no-store可以只设置一个 
no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200 
no-store浏览器不缓存,刷新页面需要重新下载页面

回答:

一般通过 vue-cli 的项目,默认的 webpack 线上配置文件会配置 output

filename: utils.assetsPath('js/[name].[chunkhash].js'),

打出来的 dist 目录的文件名应该都是带 md5 的,这样每次文件修改,资源的文件名是会变的

回答:

Vue SPA 项目,浏览器和 nginx 反向代理缓存问题解决实方案https://juejin.im/post/5c09cb…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注