为什么你的SPA一刷新就404？

最近帮朋友部署React项目时踩了个经典坑：开发环境下路由跳转好好的，部署到服务器后，一刷新页面就跳404！控制台报错"GET /about 404 Not Found"。如果你用Vue、React、Angular开发单页应用（SPA），大概率也遇到过类似问题——这不是框架的锅，而是服务器不懂"前端路由"的小心思。

前端路由的"障眼法"

传统网站的每个URL对应服务器上一个真实文件（比如/about.html），但SPA的路由是"假的"：https://example.com/about其实是前端通过JavaScript动态渲染的组件，服务器上根本没有about这个文件。当用户直接访问这个URL或刷新页面时，服务器会傻乎乎地去找对应的物理文件，找不到就返回404。

▲ 路由更新流程图：从URL变化到组件渲染的全过程

拯救者try_files：Nginx的"文件侦探"

解决这个问题的核心就是Nginx的try_files指令——它像个侦探，会按顺序检查文件是否存在，找不到就"交给前端处理"。记住这行配置，90%的SPA部署问题都能解决：

try_files $uri $uri/ /index.html;

♂ 这行代码到底干了啥？

• $uri：先找请求的文件（比如访问/about，会检查服务器上有没有about文件）
• $uri/：再试试当目录访问（检查about/文件夹及其中的index.html）
• /index.html：前两步都找不到？直接返回SPA的入口文件，让前端路由接手

举个栗子：用户访问/user/profile，Nginx会：

1. 找/user/profile文件 → 没有
2. 找/user/profile/目录 → 没有
3. 乖乖返回index.html，Vue/React Router看到URL后渲染Profile组件

实战配置：Vue/React通用方案

基础配置（根目录部署）

把打包好的dist（Vue）或build（React）文件夹丢到服务器，Nginx配置这样写：

server {
    listen 80;
    server_name yourdomain.com;  # 替换成你的域名
    root /var/www/your-spa/dist;  # 项目路径

    location / {
        index index.html;
        try_files $uri $uri/ /index.html;  # 核心配置
    }

    # 静态资源缓存（可选但推荐）
    location ~* \.(js|css|png|jpg)$ {
        expires 30d;  # 缓存30天
        add_header Cache-Control "public, max-age=2592000";
    }
}

▲ React项目Nginx配置示例，红箭头标注关键路径

子目录部署（比如/app路径下）

如果要部署在
https://yourdomain.com/app，需要改两处：

1. 前端路由配置（以Vue为例）：
2. // router/index.js const router = new VueRouter({ mode: 'history', base: '/app', // 对应子目录路径 routes: [...] })
3. Nginx配置：
4. location /app { alias /var/www/your-spa/dist; # 注意用alias而非root try_files $uri $uri/ /app/index.html; # 兜底路径要加子目录 }

API代理：解决跨域问题

SPA通常需要调用后端API，直接请求会跨域，Nginx代理来帮忙：

location /api/ {
    proxy_pass http://your-backend-server:8080/;  # 后端接口地址
    proxy_set_header Host $host;  # 传递真实域名
    proxy_set_header X-Real-IP $remote_addr;  # 传递客户端IP
}

避坑指南：90%的人会踩这些雷

1. 403 Forbidden错误

原因：Nginx没权限访问文件，或目录没有index.html
解决：

# 设置文件权限
sudo chown -R www-data:www-data /var/www/your-spa
sudo chmod -R 755 /var/www/your-spa

2. 静态资源404（JS/CSS加载失败）

原因：publicPath配置错误，或Nginx静态资源路径不对
解决：

• Vue项目在vue.config.js设置：publicPath: '/'
• React项目在package.json设置："homepage": "."

3. 重定向循环（ERR_TOO_MANY_REDIRECTS）

原因：try_files配置冗余，比如写成try_files $uri /index.html $uri/;
解决：保持简洁顺序：try_files $uri $uri/ /index.html;

性能优化：让你的SPA飞起来

配置好路由后，再加点料提升加载速度：

1. 启用Gzip压缩

gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_comp_level 6;  # 压缩级别1-9，6是兼顾速度和压缩率的黄金值

2. 开启HTTP/2

listen 443 ssl http2;  # 比HTTP/1.1快50%，需要SSL证书

▲ 性能优化关键配置：epoll模型、连接数、Gzip等

真实案例：某电商React应用的部署之路

朋友的电商项目用React Router，上线后刷新/product/123就404。按以下步骤解决：

1. 检查Nginx配置，发现缺少try_files，添加后：
2. location / { try_files $uri $uri/ /index.html; }
3. 静态资源404，排查发现package.json没设homepage，添加：
4. "homepage": "."
5. 开启Gzip后，JS文件从200KB压缩到60KB，首屏加载快了3秒！

总结：记住这3步

1. 前端路由：设mode: 'history'，子目录部署加base
2. Nginx配置：核心try_files $uri $uri/ /index.html;
3. 权限与路径：确保Nginx有权限，静态资源路径正确

有了try_files这个神器，Vue/React部署再也不怕404！快去试试，让你的SPA丝滑运行～

如果你遇到其他问题，欢迎在评论区留言，我会一一解答！觉得有用别忘了点赞收藏哦～

（注：本文配置示例基于Nginx 1.21.0，不同版本可能略有差异，建议配合官方文档使用）

参考资料：

• Vue Router官方文档
• Nginx try_files指令详解
• React部署Nginx最佳实践