单页面应用路由重写时 Nginx 重写怎么配-Nginx-PHP中文网

单页面应用使用history模式时，nginx需配置try_files实现前端路由回退：根部署用location / { try_files $uri $uri/ /index.html; }，子路径部署需配合alias和base设置，并分离api与静态资源代理。

单页面应用路由重写时 nginx 重写怎么配

单页面应用（SPA）用 History 模式时，用户访问 /user/profile 或刷新页面，Nginx 默认会尝试找对应物理路径的文件，但实际所有路由都由前端 JS 控制。必须让 Nginx 在找不到真实文件时，始终返回 index.html，由前端接管路由。配置核心是 try_files，不是 rewrite。

基础配置：根路径部署

项目部署在域名根目录（如 https://example.com/），只需一个 location 块：

location / { try_files $uri $uri/ /index.html; }
$uri 先检查是否存在同名文件（如 /logo.png）
$uri/ 再检查是否为目录（如 /docs/）
都不存在时，内部重定向到 /index.html，不改变浏览器地址栏

子路径部署：带前缀如 `/app/`

项目实际访问地址是 https://example.com/app/，需两步配合：

Nginx Hosting

通过服务器本地nginx实例实现零认证静态游戏托管。作为所有浏览器游戏的主要部署方式，无需登录、无需令牌、无需用户操作。

下载

Nginx 中 location 匹配带前缀：location /app/ { alias /var/www/my-spa/; try_files $uri $uri/ /app/index.html; }
前端构建时设置 base: "/app/"（Vue）或 homepage: "/app"（React），确保资源路径（如 /app/static/js/app.js）能正确加载
注意：alias 结尾有斜杠，root 没有；try_files 最后一项写 /app/index.html，不是 /index.html

API 接口与静态资源分离

避免所有请求都落到 SPA 回退逻辑里，要明确区分：

API 请求走反向代理：location /api/ { proxy_pass http://backend; proxy_set_header Host $host; }
静态资源（js/css/img）通常由同一目录提供，try_files 已覆盖；若资源放在 CDN 或独立路径，可加专属 location，如 location /static/ { expires 1y; add_header Cache-Control "public, immutable"; }
图标、robots.txt 等可单独处理：location = /favicon.ico { log_not_found off; return 204; }