@hf-/vite-plugin-auto-router/README.md

A Vite plugin for auto-generating Vue router configuration based on file system

# vite-plugin-auto-router

一个基于文件系统自动生成 Vue Router 配置的 Vite 插件。

## 特性

- 📁 基于文件系统的路由生成
- 🔄 支持动态路由参数（通过文件名下划线标记）
- 🎯 自动处理索引路由（index.vue）
- 🛠 支持路由元数据配置（.meta.js 文件）
- ⚡️ 开发环境实时更新
- 🎨 可配置的路由生成规则

## 安装

```bash
npm install vite-plugin-auto-router --save-dev
# 或者
yarn add -D vite-plugin-auto-router
# 或者
pnpm add -D vite-plugin-auto-router
```

## 使用方法

在你的 Vite 配置文件中添加插件：

```js
// vite.config.js / vite.config.ts
import { defineConfig } from 'vite'
import autoRouter from 'vite-plugin-auto-router'

export default defineConfig({
  plugins: [
    autoRouter({
      // 配置选项
    })
  ]
})
```

## 配置选项

| 选项 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| viewsDir | string | 'src/views' | 视图文件所在的目录 |
| outputPath | string | 'src/router/routes.ts' | 路由配置的输出路径 |
| dynamicRouteFromUnderscore | boolean | true | 是否将文件名中的下划线转换为动态路由参数 |
| removeRedundantSegments | boolean | true | 是否移除重复的目录名和文件名 |

## 路由规则

### 基本路由

```
src/views/
  ├── Home.vue         -> /home
  ├── About.vue        -> /about
  └── Users/
      ├── index.vue    -> /users
      └── Profile.vue  -> /users/profile
```

### 动态路由

```
src/views/
  └── Users/
      └── _id.vue      -> /users/:id
```

### 路由元数据

创建与组件同名的 .meta.js 文件来配置路由元数据：

```
src/views/
  └── About.vue
  └── About.meta.js    -> 配置 About 路由的元数据
```

```js
// About.meta.js
export default {
  meta: {
    title: '关于我们',
    requiresAuth: true
  }
}
```

## 许可证

MIT