【求助】vue打包后的html如何禁止浏览器缓存

nemesiszh
  • 360

1、npm run build时,把版本号是时间戳加上了
文件名:app.1.0.1.1620896247573.css
2、index.html页面添加了

<meta http-equiv=Expires content=0>
<meta http-equiv=Pragma content=no-cache>
<meta http-equiv=Cache-control content=no-cache>
<meta http-equiv=Cache content=no-cache>

3、nginx配置了如下:

    location ~ .*\.html$
    {
        add_header Cache-Control no-cache;
    }

问题:
把重新打包的文件上传到服务器后,关闭原来打开的页面的浏览器,后重新打开浏览器,页面的代码没有变化(浏览器:chrome;设置了启动时自动打开上次浏览的页面)不知道能否解决???
尝试如下操作能正常显示最新代码:
1、关闭打开网页的窗口后再重新打开,url一致,index.html的源代码为最新的
2、关闭整个浏览器后,重启电脑后,再打开浏览器,index.html的源代码为最新的

回复
阅读 800
4 个回答
✓ 已被采纳

推荐读一下这个文章:https://github.com/gauseen/bl...

no-cache:不直接使用缓存,而是在使用浏览器缓存之前,先通过协商缓存策略,跟服务器发个校验请求,检查资源是否被更改,再决定是否使用缓存
no-store:禁止缓存,每次请求都要向服务器重新获取数据

猜侧是你的 index.html 被缓存了,导致请求了之前的静态资源,试一下禁止缓存

location ~ .*\.html$
{
  add_header Cache-Control no-store;
}

nginx配置下加上这个试试

add_header Pragma no-cache;

添加参数试试, url?v=xxx

在html的head部分添加那一堆头不是最佳实践,强烈不建议。这些header你应该放到服务端去。

另外,nginx的默认配置其实就是符合你的期望的,你根本不需要自己瞎搞一堆配置就符合你的效果。它默认不会添加任何cache-control以及expires头配置,只会添加一个last-modified头,这样浏览器每次都会请求服务端资源是否最新,否则返回304

你知道吗?

宣传栏