为什么我的 Vue 项目静态资源没走 Disk Cache？

玉丹提问于 2026-03-19 16:49:22 阅读 6

优化

我用 Vue CLI 打包上线后，发现每次刷新页面都会重新请求 JS 和 CSS 文件，明明设置了 long-term caching，但 Chrome DevTools 里看到这些资源的状态是 200（from memory cache）或者直接重新下载，根本没进 Disk Cache。是我配置错了吗？

我试过在 vue.config.js 里加 filenameHashing: true，也确认了服务器返回了 Cache-Control: max-age=31536000，但还是不行。本地开发时没问题，一上生产环境就不缓存。

<template>
  <div id="app">
    <img src="./assets/logo.png" alt="logo" />
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: { HelloWorld }
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

百里耘郗 Lv1

这问题挺常见的，先别急着改配置。

你看到 from memory cache 是正常的，Chrome 读取资源时优先走内存，刷新页面基本都这样。你需要确认的是：关闭浏览器标签页，等几秒，再重新打开页面，这时候如果还是重新下载，那才是真的没进 Disk Cache。

先拿 curl 查一下服务器实际返回的响应头：

curl -I https://你的域名/js/app.abc123.js

重点看这几项：

服务器返回的必须是类似这样的：

Cache-Control: max-age=31536000, immutable

如果同时返回了这些，那就完蛋：

Cache-Control: no-cache

Pragma: no-cache

Vary: Cookie

Vary: Cookie 这个坑很多人踩过，服务器只要加了这个，浏览器就认为每个用户的缓存不一样，不会走 Disk Cache。

检查一下你的服务器配置（nginx/apache/cdn），把无关的缓存头删掉，只保留 max-age 就够了。

如果用的是 nginx，加一行：

location / {

    # 其他配置...

    # 静态资源缓存

    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {

        expires 1y;

        add_header Cache-Control "public, max-age=31536000, immutable";

    }

}

代码放这了，自己对比一下服务器实际返回的是什么。

2026-03-19 17:01