《前端部署404？加个斜杠就能解决！Nginx配置的隐藏坑点》

刚部署的前端项目访问页面正常，但一刷新就404？
路由跳转正常，直接输入地址就白屏？
别急着改代码，可能只是你的Nginx少了个/！🚨

---

一、现象还原

典型报错场景

1. 访问首页正常：https://example.com ✅
2. 点击路由跳转正常：https://example.com/about ✅
3. 直接浏览器输入https://example.com/about → 404 ❌
4. 刷新任意子页面 → 404 ❌

---

二、为什么会出现？

根本原因

• 前端路由（React/Vue/Vue Router）是​​伪静态路由​​
• 浏览器直接请求/about时，Nginx会​​真实查找​​服务器上的/about.html文件
• 但SPA应用只有index.html，其他路径需要​​重定向回首页​​

错误配置示例（会引发404）

location / {
    root /var/www/dist;
    index index.html;
    # 缺少关键配置！
}

---

三、三种解决方案

方案1：加try_files（推荐⭐）

location / {
    root /var/www/dist;
    index index.html;
    try_files $uri $uri/ /index.html; # 魔法在这里！
}

​​作用​​：按顺序尝试

1. 找真实文件$uri（如/about.html）
2. 找目录$uri/
3. 都找不到就返回index.html

方案2：加重定向（兼容性更好）

location / {
    root /var/www/dist;
    index index.html;
    error_page 404 =200 /index.html; # 把404转成200返回index.html
}

方案3：Vue Router的官方方案

location / {
    root /var/www/dist;
    index index.html;
    if (!-e $request_filename) {
        rewrite ^(.*)$ /index.html break;
    }
}

---

四、原理

sequenceDiagram
    浏览器->>Nginx: 请求 /about
    Nginx->>服务器: 查找 /about.html
    服务器-->>Nginx: 404 Not Found
    Nginx->>浏览器: 返回 /index.html（因为配置了try_files）
    浏览器->>JS路由: 解析/about路径
    JS路由->>浏览器: 渲染About组件 ✅

---

五、其他相关配置

1. 带子目录的配置（项目不在根目录）

location /subfolder/ {
    root /var/www;
    try_files $uri $uri/ /subfolder/index.html;
}

2. 避免静态资源被拦截

location /assets/ {
    root /var/www/dist;
    expires 1y; # 缓存优化
}

---

六、测试你的配置

1. 检查语法：sudo nginx -t
2. 重启服务：sudo systemctl restart nginx
3. 清除浏览器缓存再测试

---

​​血泪教训​​ 💔
曾经有位同学找了3天bug，结果发现只是少了个/...
（没错就是我本人！）