在 nginx 中实现前后端分离项目的独立路由分发，核心做法是利用 try_files 指令配合正则表达式捕获组，将静态资源请求与 api 请求区分开。具体而言，通过定义一个匹配路径的正则规则，检查文件是否存在；若存在则直接返回静态文件，否则将请求代理转发至后端服务。这样做能确保前端路由（如 vue router 的 history 模式）在服务端回退时正确工作，同时避免 api 请求被错误地当作静态文件处理。
如何配置 try_files 以支持前端 History 模式的路由回退
要支持前端 History 模式的路由回退，需要在 Nginx 的 location 块中使用 try_files 指令，依次尝试匹配实际文件、目录，最后指向 /index.html。这种配置允许浏览器直接访问深层 URL（如 /user/profile），当 Nginx 发现对应物理文件不存在时，会自动返回入口 HTML 文件，由前端 JavaScript 接管路由解析。关键参数是最后一个 fallback 值，它必须指向应用的根入口文件，且不能带有查询字符串，否则可能导致缓存问题或路由失效。
server {
listen 80;
server_name example.com;
root /usr/share/nginx/html;
index index.html;
# 匹配所有非 API 请求
location / {
try_files $uri $uri/ /index.html;
}
# 匹配 API 请求并转发到后端
location /api/ {
proxy_pass http://backend:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
上述配置中，try_files $uri $uri/ /index.html; 是核心逻辑。首先尝试查找精确匹配的 URI 对应的文件，如果失败则尝试作为目录查找，如果仍失败则返回 /index.html。对于 /api/ 开头的请求，Nginx 会跳过 location / 中的 try_files 逻辑，直接进入 location /api/ 块进行反向代理。这种分离确保了静态资源和动态 API 请求互不干扰。预期结果是：访问 /css/style.css 时直接返回文件；访问 /user 时返回 index.html；访问 /api/users 时转发给后端。
如何处理多应用部署下的路由冲突与隔离
在多应用部署场景下，例如同时提供管理后台和移动端页面，可以通过不同的 location 前缀来隔离路由。每个应用拥有独立的 root 目录和 try_files 配置，从而避免文件路径冲突。具体做法是为每个应用定义独立的 location 块，并使用各自的 try_files 规则指向对应的入口文件。这种方式不仅实现了路由隔离，还允许不同应用使用不同的构建输出目录，便于独立部署和维护。关键在于确保每个 location 块的优先级明确，避免重叠导致请求被错误处理。
server {
listen 80;
server_name example.com;
# 管理后台应用
location /admin/ {
alias /var/www/admin/dist/;
try_files $uri $uri/ /admin/index.html;
}
# 移动端应用
location /mobile/ {
alias /var/www/mobile/dist/;
try_files $uri $uri/ /mobile/index.html;
}
# 默认应用
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
在上述配置中，location /admin/ 使用 alias 指令将请求映射到 /var/www/admin/dist/ 目录，并通过 try_files 实现该应用的路由回退。类似地，location /mobile/ 也遵循相同逻辑。这种结构确保了不同应用的路由互不影响。例如，访问 /admin/dashboard 时，Nginx 会在 /var/www/admin/dist/ 目录下查找文件，若不存在则返回 /admin/index.html。而访问 /mobile/home 时，则会查找 /var/www/mobile/dist/ 目录。这种隔离机制提高了系统的可维护性和扩展性。预期结果是：各应用的路由独立工作，无交叉干扰。
当 try_files 找不到文件时，如何确保后端 API 不被误拦截
当 try_files 找不到文件时，若未正确配置，可能会导致后端 API 请求被误拦截为静态文件回退。为避免此问题，需确保 API 请求有独立的 location 块，且优先级高于通用 location /。具体做法是将 API 路径（如 /api/）单独定义，并在其中使用 proxy_pass 直接转发请求，而不经过 try_files 逻辑。这样即使 try_files 无法找到对应文件，API 请求也不会被重定向到 index.html，而是正常转发给后端服务。关键是保持 location 块的顺序和优先级清晰，避免规则重叠。
在实际操作中，建议将 API 相关的 location 块放在 location / 之前，以确保其优先匹配。例如，location /api/ 会先于 location / 被评估，从而避免进入 try_files 逻辑。此外，还需注意 proxy_pass 后的路径处理，确保后端服务能正确接收请求。预期结果是：API 请求始终转发给后端，不受 try_files 影响，而静态资源和前端路由则按预期处理。这种配置方式能有效防止路由冲突，提升系统的稳定性。
