Vue项目中Disk Cache如何控制？文件更新后依然加载旧版本

技术梓晴提问于 2026-02-02 05:44:29 阅读 87

优化

大家好，我在Vue项目中配置了nginx的expires头想优化Disk Cache，但文件更新后浏览器依然加载旧版本，这是为什么呢？

我按照教程在nginx.conf里设置了：


location ~* .(css|js|jpg)$ {
    expires 30d;
    add_header Cache-Control "public";
}

但修改了main.js后，开发者工具显示200 (from disk cache)。尝试过清除浏览器缓存、关闭服务器重启，但问题依旧。有没有更好的控制Disk Cache策略的方法？

另外发现服务端响应头里的ETag和Last-Modified都没变化，是不是应该配合使用其他Cache-Control指令？

我来解答赞 10 收藏

反馈

1 条解答

司徒成娟 Lv1

问题出在缓存键没变，浏览器认为是同一个资源。最简单的方法是在打包时给静态资源加上hash值，比如 main.[hash].js，这样每次文件更新都会生成新名字，浏览器就会重新加载。

在vue.config.js里加这段：

module.exports = {

  filenameHashing: true

}

另外，你的Nginx配置可以改成这样，强制使用immutable策略：

location ~* .(css|js|jpg)$ {

    expires 30d;

    add_header Cache-Control "public, immutable";

}

我之前也遇到过这个问题，加上hash和immutable就解决了，推荐试试。

2026-02-02 06:01