有时候我们发了新版，结果用户看到的还是老界面。 你：“我更新了啊！” 用户：“我这儿没变啊！” 然后你俩开始互相怀疑人生。那咋办？总不能让用户都清缓存吧？ 当然不能。 我们得让浏览器自己知道“该换新的了”。核心思路就一条：让静态资源的文件名变一变。 浏览器靠文件名判断是不是同一个文件。 文件名变了，它就会重新下载。
方法 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;
}最后： 缓存这事看着小，真出问题能让我们忙半天。 提前设好机制，发版才能睡得香。 搞定！!