指南
示例
API
贡献
指南
示例
API
贡献

插件配置

详细了解 @feoe/fs-router 各个构建工具插件的配置选项。

通用配置选项

所有构建工具插件都支持以下配置选项：

1interface PluginConfig {
2  /** 路由文件目录，默认 'src/routes' */
3  routesDirectory: string
4  /** 生成的路由文件路径，默认 'src/routes.tsx' */
5  generatedRoutesPath: string
6  /** 路由文件扩展名，默认 ['.js', '.jsx', '.ts', '.tsx'] */
7  routeExtensions?: string[]
8  /** 是否启用路由生成，默认 true */
9  enableGeneration?: boolean
10  /** 路径别名配置 */
11  alias?: {
12    name: string
13    basename: string
14  }
15  /** 是否启用代码分割，默认 true */
16  splitting?: boolean
17  /** 是否启用默认错误边界，默认 false */
18  defaultErrorBoundary?: boolean
19  /** 类型生成选项 */
20  typeGenerateOptions?: TypeGenerateOptions
21}
22
23export interface TypeGenerateOptions {
24  /** 类型文件输出路径 */
25  routesTypeFile: string
26  /** 是否生成路由参数类型 */
27  generateRouteParams?: boolean
28  /** 是否生成 Loader 类型 */
29  generateLoaderTypes?: boolean
30  /** 路由目录配置 */
31  routesDirectories?: RouteDirectory[]
32}
33
34export interface RouteDirectory {
35  /** 路由前缀 */
36  prefix?: string
37  /** 路由目录路径 */
38  path: string
39}

Vite 插件配置

基础配置

1// vite.config.ts
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4import { FileBasedRouterVite } from '@feoe/fs-router/vite'
5
6export default defineConfig({
7  plugins: [
8    react(),
9    FileBasedRouterVite({
10      routesDirectory: 'src/routes',
11      generatedRoutesPath: 'src/routes.tsx',
12      enableGeneration: true,
13      // 类型生成选项
14      typeGenerateOptions: {
15        routesTypeFile: 'src/routes-type.ts',
16        generateRouteParams: true,
17        generateLoaderTypes: true,
18        routesDirectories: []
19      },
20    })
21  ]
22})

Webpack 插件配置

基础配置

1// webpack.config.js
2const { FileBasedRouterWebpack } = require('@feoe/fs-router/webpack')
3
4module.exports = {
5  plugins: [
6    new FileBasedRouterWebpack({
7      routesDirectory: 'src/routes',
8      generatedRoutesPath: 'src/routes.tsx',
9      enableGeneration: true,
10    })
11  ]
12}

Rspack 插件配置

基础配置

1// rspack.config.js
2const { FileBasedRouterRspack } = require('@feoe/fs-router/rspack')
3
4module.exports = {
5  plugins: [
6    new FileBasedRouterRspack({
7      routesDirectory: 'src/routes',
8      generatedRoutesPath: 'src/routes.tsx',
9      enableGeneration: true
10    })
11  ]
12}

Rsbuild 插件配置

基础配置

1// rsbuild.config.js
2import { FileBasedRouterRspack } from "@feoe/fs-router/rspack"
3
4const pluginRouter = FileBasedRouterRspack({
5  routesDirectory: 'src/routes',
6  generatedRoutesPath: 'src/routes.tsx',
7  enableGeneration: true
8})
9
10export default defineConfig({
11  tools: {
12    rspack: {
13      plugins: [pluginRouter]
14    }
15  }
16})

详细配置选项

类型生成选项

1interface TypeGenerateOptions {
2  /** 类型文件输出路径，默认 'src/routes-type.ts' */
3  routesTypeFile: string
4  /** 是否生成路由参数类型，默认 true */
5  generateRouteParams?: boolean
6  /** 是否生成 Loader 类型，默认 true */
7  generateLoaderTypes?: boolean
8  /** 路由目录配置 */
9  routesDirectories?: RouteDirectory[]
10}
11
12interface RouteDirectory {
13  /** 路由前缀 */
14  prefix?: string
15  /** 路由目录路径 */
16  path: string
17}

故障排除

常见配置问题

  1. 路由文件未生成

    1// 确保路径正确且有写入权限
2FileBasedRouterVite({
3  routesDirectory: 'src/routes',  // 确保目录存在
4  generatedRoutesPath: 'src/routes.tsx'  // 确保父目录存在
5})

  2. 类型生成失败

    1// 确保 TypeScript 配置正确
2FileBasedRouterVite({
3  enableGeneration: true,
4  typeGenerateOptions: {
5    routesTypeFile: 'src/routes-type.ts'  // 确保路径有效
6  }
7})

  3. 热更新不工作

确保监听选项正确配置，参考贡献指南

页面导航