芋道前端项目部署后刷新 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 TDA[用户访问 / 或 /user/profile] --> B{Nginx 检查文件是否存在}B -- 存在 --> C[返回对应的静态文件]B -- 不存在 --> D[回退到 index.html]D --> E[前端路由处理路径，渲染对应页面]
👉 图中可以看到，当刷新 /user/profile 这样的路由时，Nginx 找不到对应文件，就会回退到 index.html，交给前端路由继续处理。
🔹 配置步骤
-
使用宝塔或 SSH 登录服务器
-
打开 Nginx 配置文件（通常在
/etc/nginx/conf.d/或者宝塔面板里） -
找到你项目的
server {}配置块 -
在里面加上上面的
location / {...}配置 -
保存并重启 Nginx：
nginx -s reload
🔹 总结
如果你在部署 芋道前端项目 后遇到刷新 404 问题，不要慌，只要在 Nginx 里加上：
try_files $uri $uri/ /index.html;
就能完美解决！
这个方法不仅适用于芋道前端项目，几乎所有的 Vue、React、Angular 单页面应用部署后刷新报错，都可以这样修复。