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

单页面应用（SPA）需配置 Nginx fallback 至 index.html 以支持前端路由，核心是 location / 中使用 try_files $uri $uri/ /index.html；静态资源应单独配置 location 避免误重写；禁用 rewrite 和 return 301 等导致页面刷新的操作。

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

单页面应用（SPA）的路由由前端 JavaScript 控制，比如 Vue Router 的 history 模式或 React Router 的 BrowserRouter，它们不依赖真实文件路径。当用户直接访问 /user/profile 这类非根路径时，Nginx 默认会去查找对应物理文件，结果返回 404。解决办法是让所有非静态资源请求都 fallback 到 index.html，交由前端路由接管。

核心配置：用 try_files 实现 fallback

这是最推荐、最简洁的方式，无需正则匹配，性能好且语义清晰：

在 location / 块中使用 try_files $uri $uri/ /index.html;
$uri 尝试匹配真实存在的文件（如 /logo.png）
$uri/ 尝试匹配目录（如 /assets/）
都不命中时，返回 /index.html，由前端 JS 解析当前 URL 并渲染对应视图

区分静态资源和 SPA 入口

避免把图片、CSS、JS 等静态文件也重写到 index.html，否则会损坏资源加载：

为静态资源单独配置 location，例如 location ~* \.(js|css|png|jpg|gif|svg|woff2?|ttf|eot)$
这类 location 中不要写 try_files fallback，保持默认行为即可
确保 root 或 alias 指向正确的静态资源目录（如 /var/www/myapp）

注意 history.pushState 的兼容性

该方案依赖浏览器的 History API，要求服务端不干预 URL 路径：

Nginx Hosting

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

下载

不能用 rewrite 指令做 301/302 重定向（会刷新页面，破坏 SPA 体验）
避免在 location 中误加 return 301 或 rewrite ^/(.*)$ /index.html last; 这类写法
如果必须处理特定路径（如强制跳转 /old → /new），应在前端路由中完成，或用 return 301 但仅限明确需 SEO 或旧链接迁移的场景

完整示例配置片段

假设项目部署在 /var/www/spa，入口文件为 index.html：

server {
    listen 80;
    server_name example.com;
    root /var/www/spa;
    index index.html;
<pre class="brush:php;toolbar:false;"># 静态资源直接返回，不 fallback
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# SPA 主路由：所有其他请求都指向 index.html
location / {
    try_files $uri $uri/ /index.html;
}

}