Vite 集成示例#
本指南展示如何在 Vite 项目中集成 @feoe/fs-router。
安装依赖#
1npm install @feoe/fs-router -DVite 配置#
1// vite.config.ts
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4import { FileBasedRouterVite as fileBasedRouter } from '@feoe/fs-router/vite'
5
6export default defineConfig({
7 plugins: [
8 react(),
9 fileBasedRouter({
10 // 路由文件目录
11 routesDirectory: 'src/routes',
12 // 生成的路由文件路径
13 generatedRoutesPath: 'src/routes.tsx',
14 // 启用类型生成
15 enableGeneration: true,
16 typeGenerateOptions: {
17 routesTypeFile: 'src/routes-type.ts',
18 }
19 })
20 ],
21 resolve: {
22 alias: {
23 '@': '/src'
24 }
25 }
26})项目结构#
my-vite-app/
├── src/
│ ├── routes/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── about/
│ │ │ └── page.tsx
│ │ └── user/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── [id]/
│ │ └── page.tsx
│ ├── main.tsx
│ └── routes.tsx # 自动生成
├── vite.config.ts
└── package.json
入口文件#
1// src/main.tsx
2import React from 'react'
3import ReactDOM from 'react-dom/client'
4import { createBrowserRouter, RouterProvider } from 'react-router-dom'
5import { routes } from './routes'
6import './index.css'
7
8const router = createBrowserRouter(routes)
9
10ReactDOM.createRoot(document.getElementById('root')!).render(
11 <React.StrictMode>
12 <RouterProvider router={router} />
13 </React.StrictMode>
14)开发脚本#
1{
2 "scripts": {
3 "dev": "vite",
4 "build": "tsc && vite build",
5 "preview": "vite preview"
6 }
7}完整示例#
查看完整的 Vite 集成示例：GitHub 示例
页面导航