本质是资源版本切换时的瞬时路径不一致问题，源于覆盖式部署缺乏原子性、CDN/缓存未同步或轮询加载与资源就绪不同步，需通过原子化部署、版本化manifest、合理缓存策略及构建期校验解决。
大型单页应用（SPA）在轮询更新期间出现静态资源 404，本质不是“刷新导致的路由 404”，而是资源版本切换时的瞬时路径不一致问题。它常发生在热更新、CDN缓存未同步、构建产物覆盖部署等场景下——浏览器正请求旧哈希名的 JS/CSS 文件，而服务端已删掉旧文件、只保留新文件，于是返回 404。
这类故障隐蔽性强：页面看似正常运行，但控制台持续报错、部分功能异常、后续加载失败，甚至引发白屏或路由卡死。
静态资源哈希失效导致的 404
Vue/React 等框架构建时默认给静态资源加 contenthash（如 app.a1b2c3.js），每次内容变更都会生成新文件名。若采用「覆盖式部署」（直接 rm -rf dist && cp -r new-dist/* /var/www/html/），在复制过程中会出现短暂窗口：
- 浏览器已加载
index.html（含旧哈希引用） - 同时发起对
chunk.7890de.js的请求 - 但该文件尚未被复制到目标目录，Nginx 找不到 → 返回 404
关键点：这不是 Nginx 路由配置问题，而是部署原子性缺失。
解决方法：
- 使用原子化部署：先上传完整新包到临时目录（如
/var/www/html-new），再用mv原子替换（mv /var/www/html-new /var/www/html） - 或启用软链接切换：构建后指向新版本目录，
ln -sf /var/www/releases/v2.3.1 /var/www/current，Nginx 的root指向/var/www/current
轮询期间 HTML 与资源不同步
某些 SPA 会通过轮询 /api/version 或 /manifest.json 检测更新，并动态加载新 chunk。若 manifest 返回了新资源路径，但对应文件尚未就绪（CDN 未刷新、OSS 上传未完成），就会触发 404。
建议做法：
- manifest 中的资源路径必须带完整版本标识（如
/static/js/app-v2.3.1.a1b2c3.js），且服务端对该路径做独立缓存控制 - 在加载前增加存在性预检（可选）：
const checkAsset = async (url) => { try { const res = await fetch(url, { method: 'HEAD', cache: 'no-store' }); return res.ok; } catch { return false; } }; - 更稳妥的是使用
import()动态导入配合错误兜底，避免全局中断：import('./pages/Report.vue').catch(() => { alert('功能暂不可用，请刷新重试'); });
Nginx 缓存策略加剧瞬时 404
若 Nginx 对 .js .css 设置了强缓存（如 expires max），但 HTML 本身缓存时间短（如 expires 1m），会导致浏览器反复拉取新 index.html，却长期复用旧缓存的 JS —— 一旦旧 JS 被清理，就 404。
推荐缓存配置：
# HTML 不缓存（或极短缓存）
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
}
# 静态资源按哈希名缓存长期有效
location ~* \.[a-f0-9]{8,}\.(js|css|png|jpg|gif|ico|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 其他静态资源（无哈希）缓存较短
location ~* \.(js|css|png|jpg|gif|ico|svg|woff2)$ {
expires 1h;
}注意：immutable 告诉浏览器“只要 URL 不变，内容绝不会变”，避免强制验证请求（ETag/Last-Modified），提升性能，也减少因验证失败导致的误判。
构建与部署链路中的埋点验证
真正可靠的防护是可观测性。可在构建后自动注入校验逻辑：
- 构建脚本末尾生成
asset-integrity.json，记录所有产出文件的路径 + size + hash - 部署脚本上传该文件，并调用轻量健康检查接口（如
/health/assets），比对当前目录下文件是否存在且大小匹配 - 若校验失败，拒绝切换，或触发告警
这样能把 404 故障拦截在上线前，而不是让用户暴露在问题中。
不复杂但容易忽略
