Vite 不提供子目录中的index.html

Question

我用 vite 启动了一个 React-TypeScript 项目，并做了一些更改以拥有多个页面。

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 about.4ea9bc70.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 jsx-runtime.2877e684.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.254c5505.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react.35ef61ed.svg\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 reports\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite.svg\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.tsx\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 reports\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 reports.tsx\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vite-env.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.node.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 vite.config.ts\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 yarn.lock\n

\n

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

\n

index.html当我访问 http://localhost:5173/reports 时，将鼠标悬停在文件夹内，它不提供服务reports。

\n

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

\n

reports/index.html为什么我访问时它不提供 文件reports/？我怎样才能让它这样工作？我已经搜索了几个小时但没有找到任何解决方案。

\n

这是我的vite.config.ts。

\n

import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { resolve } from 'path'\nconst root = resolve(__dirname, 'src')\nconst outDir = resolve(__dirname, 'dist')\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  root,\n  plugins: [react()],\n  build: {\n    outDir,\n    emptyOutDir: true,\n    rollupOptions: {\n      input: {\n        main: resolve(root, 'index.html'),\n        about: resolve(root, 'reports', 'index.html'),\n      }\n    }\n  }\n})\n\n

\n

Answer 1

我通过使用我的自定义插件解决了问题。默认情况下/reports/和/reports是不同的路由。/Vite 在和上提供相同的内容/reports。如果没有/in end，则不将其视为目录。

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

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