Vite无法从子目录提供index.html

Question

我使用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

我可以访问http://localhost:5173/并查看我的顶层index.html页面。

但是当我访问http://localhost:5173/reports时，它不会提供位于reports文件夹内的index.html文件。

如果我访问http://localhost:5173/reports/index.html，那么我可以看到所需的文件。

为什么访问reports/时无法提供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'),
      }
    }
  }
})

- Omkar76

---

你找到了吗？ - Wizard of Kneup

@WizardofKneup 没有 :( 如果我找到了，我会在这里更新。 - Omkar76

Answer 1

我通过使用自定义插件解决了这个问题。默认情况下，/reports/和/reports是不同的路由。Vite在/和/reports上提供相同的内容。如果结尾没有/，它就不会被视为目录。

在插件中，我检查请求的路由是否是目录路径，然后检查它是否缺少结尾的/。如果缺少，我将只添加一个/并将请求重定向到该路径。

vite.config.ts：

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

// plugin
const redirectToDir = ({ root }) => ({
  name: 'redirect-to-dir',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      const filePath = join(root, req.url);
      fs.stat(filePath, (err, stats) => {
        if (!err && stats.isDirectory() && !req.url.endsWith('/')) {
          res.statusCode = 300;
          res.setHeader('Location', req.url+"/");
          res.setHeader('Content-Length', '0');
          res.end();
          return;
        }
        next();
      });
    })
  },
});

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

您可以在此处获取工作示例：https://github.com/Omkar76/vite-multipage

---

默认的 Vite 服务器是 senchalabs/connect。你可能想要使用 express 替代它 https://vitejs.dev/guide/ssr.html#setting-up-the-dev-server

- Omkar76