Vite访问子目录无法自动返回index.html问题求助

问题场景 #

我用Vite搭建了一个React-TypeScript多页面项目，目录结构如下：

.
├── dist
│   ├── assets
│   │   ├── about.4ea9bc70.js
│   │   ├── jsx-runtime.2877e684.js
│   │   ├── main.254c5505.js
│   │   └── react.35ef61ed.svg
│   ├── index.html
│   └── reports
│       └── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── index.html
│   ├── main.tsx
│   ├── reports
│   │   ├── index.html
│   │   └── reports.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

执行vite命令启动开发服务器后，访问http://localhost:5173/能正常加载根目录的index.html，但访问http://localhost:5173/reports时，无法自动返回reports文件夹下的index.html，必须访问完整路径http://localhost:5173/reports/index.html才能显示页面。

当前的vite.config.ts配置如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
const root = resolve(__dirname, 'src')
const outDir = resolve(__dirname, 'dist')

// https://vitejs.dev/config/
export default defineConfig({
  root,
  plugins: [react()],
  build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(root, 'index.html'),
        about: resolve(root, 'reports', 'index.html'),
      }
    }
  }
})

问题原因 #

• Vite开发服务器默认仅自动识别根目录下的index.html作为默认入口，对于/reports这类子目录路径，不会主动尝试匹配该目录下的index.html文件。
• 配置中的build.rollupOptions.input仅作用于生产构建阶段，用来指定多页面的打包入口，对开发服务器的路由解析逻辑没有影响。

解决方法 #

方法1：配置路由重写规则（针对单个子页面） #

修改vite.config.ts，添加开发服务器的路由重写配置，让服务器在收到/reports或/reports/请求时自动返回对应目录的index.html：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
const root = resolve(__dirname, 'src')
const outDir = resolve(__dirname, 'dist')

export default defineConfig({
  root,
  plugins: [react()],
  // 新增开发服务器配置
  server: {
    rewrite: {
      '^/reports$': '/reports/index.html',
      '^/reports/$': '/reports/index.html'
    }
  },
  build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(root, 'index.html'),
        reports: resolve(root, 'reports', 'index.html'), // 建议把key改为reports，与路径对应，避免混淆
      }
    }
  }
})

方法2：通用中间件处理（支持所有子目录） #

如果需要支持多个子页面，无需逐个配置重写规则，可以通过自定义中间件处理所有无后缀的路径：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve, extname } from 'path'
const root = resolve(__dirname, 'src')
const outDir = resolve(__dirname, 'dist')

export default defineConfig({
  root,
  plugins: [react()],
  server: {
    async middleware(req, res, next) {
      const url = req.url || '';
      // 匹配无后缀且不是.html的请求路径
      if (!extname(url) && !url.endsWith('.html')) {
        // 根据路径是否以/结尾，拼接index.html路径
        req.url = url.endsWith('/') ? `${url}index.html` : `${url}/index.html`;
      }
      next();
    }
  },
  build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(root, 'index.html'),
        reports: resolve(root, 'reports', 'index.html'),
      }
    }
  }
})

生产部署注意事项 #

生产环境部署时，需要确保你的服务器（如Nginx、Apache）配置了自动解析子目录的index.html。以Nginx为例，需在配置中添加：

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

这样访问/reports这类路径时，服务器会自动返回对应目录下的index.html文件。

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