强缓存和协商缓存是浏览器资源复用的两种机制：强缓存通过Expires或Cache-Control直接本地读取，不发请求；协商缓存则通过Last-Modified/ETag与服务器比对，返回304或200。Vue打包更新失效主因是静态资源URL未变，需用contenthash生成唯一文件名，并在Nginx中对哈希资源设max-age=31536000及immutable，对index.html设no-cache。
强缓存和协商缓存是浏览器控制资源复用的两种核心机制，它们共同决定了用户第二次访问时，页面是直接读本地、还是跟服务器确认后再决定用哪份内容。Vue项目打包后出现“更新不生效”，根本原因往往就卡在这两个环节没配对。
强缓存：不发请求，全靠本地判断
强缓存生效时，浏览器压根不会向服务器发送任何网络请求。它只看响应头里的 Expires 或 Cache-Control 字段，比对自己当前时间，就能决定是否直接从内存或磁盘里拿旧文件。
-
Expires 是 HTTP/1.0 的方式，值是一个绝对时间（如
Mon, 15 Jun 2029 20:08:12 GMT），依赖服务器与客户端时间同步，容易出偏差 -
Cache-Control 是 HTTP/1.1 的主流方案，用
max-age=31536000这类相对秒数更可靠；常用组合如public, max-age=31536000（静态资源长期缓存）或no-cache（强制走协商） - 注意：
no-cache不代表“不缓存”，而是“不强缓存”，它会触发协商缓存；no-store才是彻底禁用所有缓存
协商缓存：每次都要问一句“有更新吗？”
当强缓存失效或被绕过（比如用户按 Ctrl+F5 强刷），浏览器就会发起一次轻量请求，把上次拿到的缓存标识发给服务器，等它拍板用不用旧资源。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 常见标识有两个：Last-Modified（资源最后修改时间）对应请求头
If-Modified-Since；ETag（基于内容生成的指纹）对应If-None-Match - 服务器比对后，如果没变，就返回
304 Not Modified，浏览器继续用本地副本；如果变了，就返回200和新内容 - ETag 比 Last-Modified 更精准——文件内容没变但修改时间变了，Last-Modified 会误判；而 ETag 只认内容哈希，更适合构建产物
Vue 打包后缓存问题的根源与解法
默认 Webpack 打包输出 app.jsapp.css 这类固定文件名，导致浏览器认为“URL 没变=资源没变”，哪怕你已部署新版，它仍从缓存加载旧 JS，造成白屏、报错、功能缺失。
- 关键动作是让每个版本的静态资源拥有唯一 URL，最通用做法是在文件名中嵌入哈希值，例如
app.a1b2c3d4.js - Webpack 提供三种哈希字段：
[hash]（整包统一，一改全变）、[chunkhash]（按 chunk 分开，适合分离 vendor）、[contenthash]（按内容生成，CSS 和 JS 各自独立，推荐 Vue 项目使用） - 在
vue.config.js中配置示例：configureWebpack: {<br> output: {<br> filename: 'js/[name].[contenthash:8].js',<br> chunkFilename: 'js/[name].[contenthash:8].js'<br> }<br>} - 配套 Nginx 需设置合理缓存头：对
.js.css.png等带哈希的静态资源设Cache-Control: public, max-age=31536000；对不带哈希的index.html设Cache-Control: no-cache或短时效（如max-age=300），确保 HTML 总能拉到最新
Nginx 部署时的缓存头实操建议
光靠文件名哈希还不够，服务端响应头才是最终拍板者。Nginx 配置需区分对待不同资源类型：
- 对已哈希的静态资源（如
app.abc123.js）：location ~* \.(js|css|png|jpg|gif|ico|woff2|svg)$ {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>}
其中immutable是现代浏览器支持的指令，明确告诉它“这个 URL 永远不会变”，可进一步跳过协商缓存 - 对
index.html（无哈希，必须常新）：location = /index.html {<br> add_header Cache-Control "no-cache";<br>} - 避免全局
expires或粗暴加Cache-Control: no-store，否则所有资源都失去缓存收益，页面二次加载变慢
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
