芋道前端项目部署后刷新 404 的解决办法（Nginx 配置教程）

很多同学在把 芋道前端项目 部署到服务器后，会遇到一个奇怪的问题：
👉 项目首页能正常访问，但一旦在浏览器里手动刷新某个页面，就会报 404 Not Found 错误。

这到底是为什么呢？又该怎么解决呢？下面我给大家讲清楚。

---

🔹 为什么会出现刷新 404？

这是因为 前端项目是单页面应用（SPA），所有的路由都是在前端（浏览器）里处理的。

• 当你第一次访问 https://xxx.lyz8jj0.cn 时，Nginx 正确返回了 index.html。
• 但是当你刷新 https://xxx.lyz8jj0.cn/user/profile 这个页面时，Nginx 会去服务器上找一个真实的 /user/profile 目录或文件。
• 结果当然找不到，就返回了 404。

所以问题的本质就是：Nginx 不知道前端路由该交给 index.html 来处理。

---

🔹 解决办法

我们需要在 Nginx 配置里加一个规则：

• 当请求的文件不存在时，让它始终回退到 index.html，由前端路由自己处理。

具体配置如下：

location / {  ## 芋道前端项目
    root   /www/wwwroot/xxx.lyz8jj0.cn/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

解释一下：

• root：前端打包后的目录路径。
• index：默认首页文件。
• try_files：Nginx 会先尝试访问真实文件，如果找不到，就回退到 /index.html。

这样一来，刷新页面时 Nginx 就会始终返回 index.html，交给前端路由去渲染。

---

🔹 流程图直观理解

下面是一张简单流程图，展示请求是如何处理的：

flowchart TD
    A[用户访问 / 或 /user/profile] --> B{Nginx 检查文件是否存在}
    B -- 存在 --> C[返回对应的静态文件]
    B -- 不存在 --> D[回退到 index.html]
    D --> E[前端路由处理路径，渲染对应页面]

👉 图中可以看到，当刷新 /user/profile 这样的路由时，Nginx 找不到对应文件，就会回退到 index.html，交给前端路由继续处理。

---

🔹 配置步骤

1. 使用宝塔或 SSH 登录服务器

2. 打开 Nginx 配置文件（通常在 /etc/nginx/conf.d/ 或者宝塔面板里）

3. 找到你项目的 server {} 配置块

4. 在里面加上上面的 location / {...} 配置

5. 保存并重启 Nginx：

   nginx -s reload
   

---

🔹 总结

如果你在部署 芋道前端项目 后遇到刷新 404 问题，不要慌，只要在 Nginx 里加上：

try_files $uri $uri/ /index.html;

就能完美解决！

这个方法不仅适用于芋道前端项目，几乎所有的 Vue、React、Angular 单页面应用部署后刷新报错，都可以这样修复。