前端发版总被用户说“没更新”？一文搞懂浏览器缓存，彻底解决！

有时候我们发了新版，结果用户看到的还是老界面。 你："我更新了啊！" 用户："我这儿没变啊！" 然后你俩开始互相怀疑人生。 那咋办？总不能让用户都清缓存吧？ 当然不能。 我们得让浏览器自己知道"该换新的了"。 核心思路就一条：让静态资源的文件名变一变。 浏览器靠文件名判断是不是同一个文件。 文件名变了，它就会重新下载。

方法1：加时间戳（简单粗暴）

以前：

<script src="/js/app.js"></script>

现在：

<script src="/js/app.js?v=20250901"></script>

或者用时间戳：

<script src="/js/app.js?t=1725153600"></script>

发版的时候，改一下v 或t的值，浏览器看到后发现文件名不一样，就会重新下载。

优点：简单，立马见效

缺点：每次发版都得手动改，容易忘记。

方法2：用构建工具加hash（推荐！）

这是现在最主流的做法。 你用Webpack、Vite、Rollup这些工具打包时，它会自动给文件名加一串hash：

<script src="/js/app.a1b2c3d.js"></script>

你代码一改，hash就变。

比如下次变成：

<script src="/js/app.e4f5g6h.js"></script>

浏览器看到后发现文件名不一样，会自动拉新文件。

使用时需要检查你的打包配置，确保输出文件带hash。

Vite配置（vite.config.js）：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]'
      }
    }
  }
})

Vue CLI（vue.config.js）：

module.exports = {
  filenameHashing: true, // 默认就是 true，别关掉！
}

只要这个开着，JS/CSS 文件名就会变，浏览器就会更新。

优点：全自动，不用操心

优点：用户无感知，体验好

优点：还能利用缓存（没改的文件hash不变，继续用旧的）

来看看Vue的项目

只要你用的是Vue CLI、Vite或 Webpack打包，发版时默认就解决了缓存问题。 因为它们会自动给文件名加hash。 比如你打包后：

dist/
├── assets/app.8a2b1f3.js
├── assets/chunk-vendors.a1b2c3d.js
└── index.html

你改了代码，再打包，hash就变了：

assets/app.x9y8z7w.js  # 新文件

虽说是这样，但为啥还有人卡在旧版本？

文件名带hash，但index.html这个入口文件本身可能被缓存了！

流程：

• index.html里引用了app.8a2b1f3.js
• 用户第一次访问，加载了index.html和对应的JS
• 你发新版，index.html指向app.x9y8z7w.js
• 但用户浏览器缓存了旧的index.html，还在引用app.8a2b1f3.js
• 结果：页面还是旧的

这是入口文件缓存导致的发版无效。

解决方案

方法1：让index.html不被缓存

这是最简单有效的办法。 配置Nginx，让index.html不缓存：

location = /index.html {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

这样每次用户访问，都会重新下载最新的 index.html，自然就拿到新的 JS 文件名。

注意：其他静态资源（js/css）可以长期缓存，只有 index.html 要禁缓存。

方法2：根据版本号来控制

每一次更新都新建一个文件夹

然后修改Nginx配置

location / {
	root /home/server/html/yudao-vue3/version_1_2_5;
	index index.html index.htm;
	try_files $uri $uri/ /index.html;
}

最后： 缓存这事看着小，真出问题能让我们忙半天。 提前设好机制，发版才能睡得香。 搞定！

我是大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！

📌往期精彩

《Elasticsearch 太重？来看看这个轻量级的替代品 Manticore Search》

《只会写 Mapper 就敢说会 MyBatis？面试官：原理都没懂》

《别学23种了！Java项目中最常用的6个设计模式，附案例》

《写给小公司前端的 UI 规范：别让页面丑得自己都看不下去》

《Vue3+TS设计模式：5个真实场景让你代码更优雅》