宝塔 Nginx 部署前端页面刷新报 404 的原因及解决方法
在宝塔中使用 Nginx 部署基于 Vue、React、Angular 等前端框架的 SPA（单页应用）时，刷新页面出现 404 错误，是因为这些框架通常使用 前端路由（如 Vue Router 的 history 模式），而 Nginx 默认未配置 URL 回退规则，导致直接访问或刷新非首页路径时返回 404。
| 解决方案 | 说明 |
|---|---|
| 配置 Nginx 重写规则实现 URL 回退到 index.html | 在宝塔中进入对应网站 → 【设置】→【配置文件】，在 location / 块中添加如下规则：<pre>try_files $uri $uri/ /index.html;</pre>保存后重启 Nginx。 |
| 确保静态资源路径正确 | 检查前端构建时的 publicPath 设置（如 Vue 项目在 vue.config.js 中配置 publicPath: '/'），避免因相对路径导致资源加载失败。 |
| 使用 hash 模式替代 history 模式（可选） | 修改前端路由为 hash 模式（如 mode: 'hash'），避免刷新路径丢失问题，无需额外配置 Nginx。 |
更新时间：2025-06-04 22:28:31