在 nginx 中配置前端打包产物，核心做法是在 server 块内定义 location / 并设置 root 指向静态文件目录。nginx 会优先尝试匹配精确路径，若未找到文件则回退到 index.html，从而实现单页应用（spa）的路由兼容。
如何配置 root 和 index 实现基础访问
将 root 设置为构建后的输出目录（如 /usr/share/nginx/html），并在 location / 中指定 index index.html。这样当用户访问根路径时，Nginx 会自动返回该目录下的 index.html 文件。
server {
listen 80;
server_name example.com;
# 指向前端打包产物的根目录
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
上述配置中，try_files 指令是关键。它首先检查请求的 URI 是否对应真实文件（如 .js 或 .css），如果是则直接返回；如果不是，则尝试作为目录查找；如果仍不存在，最后重定向到 /index.html。这确保了 SPA 的前端路由在刷新页面时不会报 404。
立即学习“前端免费学习笔记（深入）”；
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
如何处理 API 代理与静态资源的冲突
当前端需要调用后端 API 时，通常使用 location /api/ 进行反向代理，而 location / 处理静态资源。这种分离避免了静态文件路径与 API 路径的冲突。
server {
listen 80;
server_name example.com;
root /usr/share/nginx/html;
index index.html;
# 静态资源处理
location / {
try_files $uri $uri/ /index.html;
}
# API 代理处理
location /api/ {
proxy_pass http://backend_server:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
在 location /api/ 中，proxy_pass 末尾的斜杠至关重要。它表示将 /api/ 前缀剥离后转发给后端。例如，请求 /api/users 会被转发为 http://backend_server:3000/users。若省略斜杠，请求将被转发为 http://backend_server:3000/api/users，可能导致后端路由不匹配。同时，proxy_set_header 确保后端能获取真实的客户端 IP 和主机名。
为什么 SPA 刷新页面会报 404 错误
SPA 应用依赖前端路由（如 React Router 或 Vue Router）管理 URL 变化，这些 URL 在后端服务器上并不存在对应的物理文件。当用户直接访问子路由（如 /dashboard）并刷新页面时，浏览器向服务器发起 GET 请求。若未配置 try_files 或 fallback，Nginx 会在 root 目录下寻找名为 dashboard 的文件或目录，找不到则返回 404。通过 try_files $uri $uri/ /index.html;，Nginx 在确认文件不存在后，会将请求内部重定向到 /index.html，由前端 JS 接管路由解析，从而避免 404。
