打包与部署
React 应用的部署产物是纯静态文件：npm run build 把整个应用编译压缩进 dist/（入口 index.html + assets/ 下的 JS/CSS）。托管方式随基础设施而定：小项目丢 Nginx/Caddy 或对象存储 + CDN，Serverless 项目可用 Vercel/Netlify。
单页应用部署有两点必须配置：1）所有路由 fallback 到 index.html（否则刷新 /user/42 报 404）；2）静态资源加长缓存 hash（Vite 已自动处理文件名 hash）。动态数据走接口，前端只管渲染。
- npm run build 产物在 dist/：纯静态，没有服务器也能跑
- SPA 必须配置路由 fallback 到 index.html（否则刷新 404）
- Vite 自动给文件加 hash，静态资源可缓存到天荒地老
部署
# nginx.conf：SPA 部署最小配置
server {
listen 80;
server_name example.com;
root /usr/share/nginx/html; # 指向 dist/
index index.html;
# 长缓存带 hash 的静态资源
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 关键：所有未匹配路由都回 index.html
location / {
try_files $uri $uri/ /index.html;
}
# 接口反向代理到后端
location /api/ {
proxy_pass http://127.0.0.1:3000;
}
}本节要点build 出静态产物 → Nginx/CDN 托管 → try_files 回 index.html → 接口反代后端。
