**有时候我们发了新版，结果用户看到的还是老界面。** 你：“我更新了啊！” 用户：“我这儿没变啊！” 然后你俩开始互相怀疑人生。 **那咋办？总不能让用户都清缓存吧？** 当然不能。我们得让浏览器自己知道“该换新的了”。 **核心思路就一条：让静态资源的文件名变一变。** 浏览器靠文件名判断是不是同一个文件。文件名变了，它就会重新下载。 ### 方法1：加时间戳（简单粗暴）以前： ```html ``` 现在： ```html ``` 或者用时间戳： ```html ``` 发版的时候，改一下`v` 或`t`的值，浏览器看到后发现文件名不一样，就会重新下载。优点：简单，立马见效\ 缺点：每次发版都得手动改，容易忘记。 ### 方法2：用构建工具加hash（推荐！）这是现在最主流的做法。你用`Webpack`、`Vite`、`Rollup`这些工具打包时，它会自动给文件名加一串`hash`： ```html ``` 你代码一改，hash就变。\ 比如下次变成： ```html ``` 浏览器看到后发现文件名不一样，会自动拉新文件。使用时需要检查你的打包配置，确保输出文件带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：根据版本号来控制每一次更新都新建一个文件夹 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/652cb188587a487dbc959ea37909a75c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YiY5aSn5Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1757475304&x-signature=z%2FpPDc0tDmA4XNoq%2BfN9c%2B2TvoQ%3D) 然后修改`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》](https://mp.weixin.qq.com/s/sEQXL0HuEhuC0yiLIY-ong) [《只会写 Mapper 就敢说会 MyBatis？面试官：原理都没懂》](https://mp.weixin.qq.com/s/o8PEVApCDmt_vufa6hTssg) [《别学23种了！Java项目中最常用的6个设计模式，附案例》](https://mp.weixin.qq.com/s/801OPrV8Wv4D0R0i9v22AA) [《写给小公司前端的 UI 规范：别让页面丑得自己都看不下去》](https://mp.weixin.qq.com/s/T_7FNwO8FtwaYxzN9-5Btg) [《Vue3+TS设计模式：5个真实场景让你代码更优雅》](https://mp.weixin.qq.com/s/qM2JcR5M9x9wvsTPfgIq_A)