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

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

优化

我用 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>

我来解答赞 9 收藏

反馈

2 条解答

毅蒙（打工版） Lv1

看起来你的问题出在几个方面，让我们一步步来看。

首先得确认你的静态资源的缓存策略确实生效了。虽然你设置了 filenameHashing: true 和服务器返回了 Cache-Control: max-age=31536000，但这些还不够。具体来说，Chrome 的 Disk Cache 机制比较复杂，有时候会因为一些小细节导致缓存失效。

你需要检查几点：

一、确保你的文件名 hash 真正起作用了。打开生产环境下的 index.html，看看引用的 JS 和 CSS 文件名是不是包含了正确的 hash 值。比如：app.abc123.js 这样的格式。如果没生效的话，在 vue.config.js 里这样配置：

module.exports = {

  configureWebpack: {

    output: {

      filename: 'js/[name].[contenthash].js',

      chunkFilename: 'js/[name].[contenthash].js'

    }

  }

}

二、服务器配置也很关键。虽然你说了 Cache-Control 设置对了，但还得检查 ETag 头是否正确设置。ETag 可能会影响缓存行为。你可以用 nginx 的配置来控制：

location ~* .(?:css|js)$ {

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

    etag on;

    if_modified_since exact;

}

三、关于 Chrome DevTools 显示的状态。从 memory cache 和 disk cache 都可能显示为 200，但表现不同。memory cache 主要用于较小的资源或者当前页面加载时已经读取过的资源。如果你发现大文件总是从 memory cache 而不是 disk cache 加载，可能是内存缓存优先级的问题。

最后提醒一下，有时开发工具本身也会影响缓存的表现，特别是你在调试模式下。建议在正式排查前清理一下浏览器缓存数据，重启几次看看效果。

说真的，缓存这东西有时挺让人头疼的，尤其是在生产环境中遇到问题时。不过按照上面的步骤仔细排查，应该能找到问题所在。

2026-03-26 23:11

百里耘郗 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