有时候我们发了新版,结果用户看到的还是老界面。 你:"我更新了啊!" 用户:"我这儿没变啊!" 然后你俩开始互相怀疑人生。 那咋办?总不能让用户都清缓存吧? 当然不能。 我们得让浏览器自己知道"该换新的了"。 核心思路就一条:让静态资源的文件名变一变。 浏览器靠文件名判断是不是同一个文件。 文件名变了,它就会重新下载。
方法1:加时间戳(简单粗暴)
以前:
html
<script src="/js/app.js"></script>
现在:
html
<script src="/js/app.js?v=20250901"></script>
或者用时间戳:
html
<script src="/js/app.js?t=1725153600"></script>
发版的时候,改一下v
或t
的值,浏览器看到后发现文件名不一样,就会重新下载。
优点:简单,立马见效
缺点:每次发版都得手动改,容易忘记。
方法2:用构建工具加hash(推荐!)
这是现在最主流的做法。 你用Webpack
、Vite
、Rollup
这些工具打包时,它会自动给文件名加一串hash
:
html
<script src="/js/app.a1b2c3d.js"></script>
你代码一改,hash就变。
比如下次变成:
html
<script src="/js/app.e4f5g6h.js"></script>
浏览器看到后发现文件名不一样,会自动拉新文件。
使用时需要检查你的打包配置,确保输出文件带hash。
Vite配置(vite.config.js):
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):
js
module.exports = {
filenameHashing: true, // 默认就是 true,别关掉!
}
只要这个开着,JS/CSS 文件名就会变,浏览器就会更新。
优点:全自动,不用操心
优点:用户无感知,体验好
优点:还能利用缓存(没改的文件hash不变,继续用旧的)
来看看Vue的项目
只要你用的是Vue CLI、Vite或 Webpack打包,发版时默认就解决了缓存问题。 因为它们会自动给文件名加hash。 比如你打包后:
bash
dist/
├── assets/app.8a2b1f3.js
├── assets/chunk-vendors.a1b2c3d.js
└── index.html
你改了代码,再打包,hash就变了:
bash
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
不缓存:
nginx
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
配置
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个设计模式,附案例》