我使用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'),
}
}
}
})