在 nginx 中配置前端单页面应用（spa）路由，核心做法是将所有非静态资源的请求 fallback 到 index.html。具体实现是在 location / 块中使用 try_files $uri $uri/ /index.html; 指令，这样当浏览器刷新或直接访问深层 url 时，nginx 会正确返回入口文件，由前端路由器接管解析。
如何区分静态资源与动态路由请求
该配置通过检查文件系统路径是否存在来决定行为。如果请求的是图片、JS 或 CSS 等静态文件，Nginx 会直接返回这些文件；如果这些文件不存在，则执行 fallback 逻辑。
server {
listen 80;
server_name example.com;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
如何处理 API 代理冲突
当 SPA 需要调用后端 API 时，需确保 API 请求不被 try_files 拦截。通常做法是为 API 路径单独定义一个 location 块，并使用 proxy_pass 转发，从而避免将 API 请求错误地重定向到 index.html。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
server {
listen 80;
server_name example.com;
root /usr/share/nginx/html;
index index.html;
# 优先处理 API 请求
location /api/ {
proxy_pass http://backend_server:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# 其他请求 fallback 到 index.html
location / {
try_files $uri $uri/ /index.html;
}
}
为什么必须使用绝对路径 /index.html
在使用 try_files 进行 fallback 时，最后一个参数必须使用以斜杠开头的绝对路径 /index.html。如果使用相对路径 index.html，Nginx 可能会将其解释为内部重定向到当前 URI 下的同名文件，导致 404 错误或循环重定向。绝对路径确保了无论当前请求的 URI 是什么，最终都指向根目录下的入口文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
