在宝塔面板上部署 Nuxt.js 单页应用（SPA 模式）到子路径时，通过点击跳转可以正常访问,但直接在浏览器输入 URL 会返回 404 或显示空白页面。

环境信息：

- 服务器管理：宝塔面板

- 主项目：PHP 开源项目

- 前端项目：Nuxt.js（SPA 模式）

- 部署路径/www/wwwroot/example.com/public/subapp/

- 访问地址https://example.com/subapp/page/xxx

问题现象：

- ✅ 从首页点击链接跳转正常

- ❌ 直接访问 https://example.com/subapp/page/xxx 显示 404

## 问题原因

SPA 应用使用前端路由，所有路由实际上都需要由 index.html 处理。当直接访问子路径时，Nginx 会尝试查找对应的物理文件，找不到就返回 404。需要配置 Nginx 将所有请求重定向到 index.html。

## 解决方案

### 1. 修改 Nginx 配置

进入宝塔面板：**网站** → 选择站点 → 设置 → 配置文件

在 server {} 块内添加以下配置：

```nginx

location /subapp/ {

alias /www/wwwroot/example.com/public/subapp/;

try_files $uri $uri/ /subapp/index.html;

index index.html;

}

配置说明：

  • alias：指定实际文件路径，末尾必须加 /

  • try_files：按顺序尝试查找文件，最后回退到 index.html

  • 这样所有子路径请求都会由 index.html 处理，前端路由接管

2. 重载 Nginx

保存配置后，在宝塔面板：软件商店 → Nginx → 重载配置

或通过 SSH 执行：

<BASH>

nginx -t && nginx -s reload

3. 清除缓存测试

清除浏览器缓存或使用无痕模式访问，验证直接访问 URL 是否正常。

注意事项

  1. 路径斜杠：location 和 alias 的末尾斜杠要保持一致

  2. 文件权限：确保 Nginx 用户（通常是 www）有读取权限

  3. 与主项目共存：该配置不会影响 PHP 等主项目的路由

适用场景

此方案适用于：

  • 在已有 PHP 项目中添加前端 SPA 子应用

  • Nuxt.js、Vue Router、React Router 等前端路由项目

  • 宝塔面板 + Nginx 环境

完成！ 现在可以直接通过 URL 访问 SPA 应用的任何路由了。