@lorcan-store/vue-auto-router

一个基于 Vite 的 Vue 路由自动生成插件。该插件会自动扫描指定目录下的 Vue 文件，并根据文件结构生成对应的路由配置。

功能特点

• 🚀 自动扫描指定目录下的 Vue 文件
• 📁 根据文件结构自动生成路由配置
• ⚙️ 支持自定义扫描目录和输出目录
• 🔍 支持文件排除配置
• 🔄 支持开发环境热更新
• 📦 支持最新版本的 Vite 和 Vue Router
• 🎯 自动生成以目录名命名的路由文件

安装

npm install @lorcan-store/vue-auto-router -D
# 或
yarn add @lorcan-store/vue-auto-router -D
# 或
pnpm add @lorcan-store/vue-auto-router -D

使用方法

在 vite.config.ts 中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueAutoRouter from '@lorcan-store/vue-auto-router'

export default defineConfig({
  plugins: [
    vue(),
    VueAutoRouter({
      // 配置选项
      scanDir: 'src/pages/**/*.vue',  // 扫描目录
      outputDir: 'src/router/',       // 输出目录
      exclude: [],                    // 排除的文件或文件夹
      layoutPath: '@/pages/layout/index.vue'  // 布局组件路径
    })
  ]
})

配置选项

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | scanDir | string | 'src/pages/**/*.vue' | 要扫描的目录路径 | | outputDir | string | 'src/router/' | 路由配置文件的输出目录 | | exclude | string[] | [] | 要排除的文件或文件夹名称 | | layoutPath | string | '@/pages/layout/index.vue' | 布局组件的路径 |

目录结构示例

src/
  pages/
    layout/
      index.vue          # 布局组件
    home/               # 首页模块
      index.vue         # 首页
    user_manager/      # 用户管理模块
      index.vue        # 列表页面
      form.vue         # 表单页面

生成的路由文件结构：

src/
  router/
    home.ts           # 首页路由配置
    user_manager.ts   # 用户管理路由配置

生成的路由配置示例 (user_manager.ts)：

import type { RouteRecordRaw } from 'vue-router'
import Layout from '@/pages/layout/index.vue'

const Index = () => import('@/pages/user_manager/index.vue')
const Form = () => import('@/pages/user_manager/form.vue')

const Router: Array<RouteRecordRaw> = [
  {
    path: '/user_manager',
    component: Layout,
    name: 'UserManager',
    children: [
      { path: '', component: Index, name: 'UserManager' },
      { path: 'form', component: Form, name: 'UserManagerForm' }
    ]
  }
]

export default Router

路由生成规则

1. 文件导入规则

   • 匹配到的 Vue 文件会被转换为动态导入
   • 常量名使用文件名首字母大写
   • 导入路径会自动转换为 @ 别名形式

2. 路由路径规则

   • 路径使用目录名全小写，以下划线分隔
   • index.vue 文件对应空路径
   • 其他文件名直接作为子路径

3. 路由名称规则

   • 使用目录名转换为驼峰式命名
   • 子路由会附加文件名（首字母大写）

4. 文件生成规则

   • 每个目录生成独立的路由文件
   • 文件名使用目录名命名
   • 自动覆盖已存在的文件

注意事项

1. 确保项目中已安装最新版本的 vue-router
2. 布局组件默认位于 src/pages/layout/index.vue，可通过 layoutPath 配置修改
3. 路由配置文件会自动生成在指定的输出目录中
4. 每个目录会生成独立的路由文件，文件名与目录名相同
5. 生成的路由文件会自动覆盖已存在的同名文件

开发环境

插件会在以下情况自动更新路由配置：

1. 开发服务器启动时
2. 添加新的 .vue 文件时
3. 删除 .vue 文件时
4. 修改 .vue 文件时
5. 项目构建开始时

版本要求

• Vite: 最新版本
• Vue Router: 最新版本
• Node.js: >= 16.0.0

License

MIT