配置带嵌套路由的Vite多页面React SPA：子路由直接访问失败排查

已配置Vite多页面项目，根目录index.html是无JavaScript的静态页面，app/index.html对应React应用。当前Vite配置与React路由代码如下，但直接访问/app/page1这类子页面时无法正常打开，请问缺失的配置是什么？

Vite配置代码 #

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        app: resolve(__dirname, "app/index.html"),
      },
    },
  },
});

React路由代码 #

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Page1 from "@/components/page1";
import Page2 from "@/components/page2";
const router = createBrowserRouter([
  {
    path: "/app",
    element: <App />,
    children: [
      {
        path: "page1",
        element: <Page1 />,
      },
      {
        path: "page2",
        element: <Page2 />,
      },
      {
        index: true,
        element: <Page2 />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);

解决方案 #

这是因为浏览器路由（BrowserRouter）依赖服务器的重写规则：当你直接访问/app/page1时，服务器会默认去寻找物理路径下的app/page1文件，但实际上这个路径并不存在——React的子路由是在客户端通过JS渲染的，所有/app下的路由请求都应该指向app/index.html，由客户端路由来处理。

1. 开发环境配置（Vite） #

在Vite配置中添加server.rewrite规则，把所有/app/*的请求都转发到/app/index.html：

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    // 开发环境重写规则，匹配/app下的所有子路径
    rewrite: {
      '^/app/.+': '/app/index.html',
    },
  },
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        app: resolve(__dirname, "app/index.html"),
      },
    },
  },
});

2. 生产环境配置 #

生产部署时，需要根据你使用的服务器配置对应的重写规则：

• Nginx：在站点配置中添加如下规则

  location /app/ {
    try_files $uri $uri/ /app/index.html;
  }
  

• Apache：在项目根目录创建.htaccess文件，添加如下内容

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /app/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /app/index.html [L]
  </IfModule>
  

内容的提问来源于stack exchange，提问作者mehran