React应用构建后需用Nginx托管，关键配置包括：①location /中用try_files $uri $uri/ /index.html支持前端路由；②单独为/index.html设置no-cache缓存策略；③对带hash的JS/CSS等静态资源启用1年强缓存并添加immutable。
React 应用构建后是静态文件，Nginx 作为高性能 Web 服务器非常适合托管。关键在于正确处理前端路由（如 React Router 的 BrowserRouter）和合理设置 index.html 的缓存策略——它不能像 JS/CSS 那样长期缓存，否则更新后用户可能加载旧版 HTML，导致资源路径错乱或白屏。
正确配置 Nginx 支持前端路由（避免 404）
React Router 使用 HTML5 History API，当用户直接访问 /dashboard 或刷新该页面时，Nginx 默认会尝试查找对应路径的物理文件，找不到就返回 404。需让所有非静态资源请求回退到 index.html，由 React 路由接管。
在 server 块中添加：
location / {
try_files $uri $uri/ /index.html;
}
注意：try_files 顺序很重要——先检查真实文件（$uri），再检查目录（$uri/），最后 fallback 到 /index.html。确保该配置位于 location ~ \.(js|css|png|jpg|gif|ico|svg|woff2?)$ 等静态资源规则之后，避免被提前匹配。
为 index.html 设置「不缓存」或「协商缓存」
index.html 是入口文件，内容虽小但每次构建可能变化（如 hash 变更、meta 标签更新）。若被强缓存（Cache-Control: public, max-age=31536000），浏览器将长期复用旧版本，导致新 JS/CSS 文件名失效，应用无法加载。
推荐做法：
- 禁用强缓存：
add_header Cache-Control "no-cache, no-store, must-revalidate"; - 或启用协商缓存（更友好）：
add_header Cache-Control "public, max-age=0, must-revalidate";，并确保响应带ETag或Last-Modified（Nginx 默认开启） - 在
location = /index.html块中单独配置，不影响其他静态资源
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
# 可选：禁用 Vary 头减少代理缓存歧义（如 CDN）
# add_header Vary "";
}
对 JS/CSS/图片等静态资源启用长期缓存
React 构建工具（如 CRA、Vite）默认为输出文件名注入内容哈希（如 main.a1b2c3d4.js），这意味着文件内容不变则文件名不变。可安全启用强缓存：
- JS/CSS：设置
Cache-Control: public, max-age=31536000（1 年） - 字体、图片等：同样适用长期缓存，但注意 SVG/ICO 等小图标可设更短时间（如 1 小时）以防误操作
- 利用
expires指令或add_header统一管理
location ~ \.(js|css|json|webp|png|jpe?g|gif|ico|svg|eot|ttf|woff|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
immutable 提示浏览器：该资源在过期前绝不会变更，可跳过后续条件请求（如 If-None-Match），进一步提升重复访问性能。
验证与调试缓存行为
部署后务必验证实际响应头：
- 打开浏览器开发者工具 → Network → 刷新页面 → 查看
index.html的Response Headers，确认含Cache-Control: no-cache... - 检查
main.xxxx.js是否返回Cache-Control: public, max-age=31536000, immutable - 尝试修改源码、重新构建、部署，刷新页面观察是否加载新逻辑（而非白屏或旧 UI）
- 使用
curl -I https://your-domain/index.html快速查看响应头
若仍遇到白屏，常见原因是 index.html 缓存未及时更新，或 Nginx 配置未重载（运行 nginx -s reload）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
