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