@hf-/vite-plugin-auto-router v1.0.0

vite-plugin-auto-router

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

特性

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

安装

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

使用方法

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

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

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

配置选项

路由规则

基本路由

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 路由的元数据

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

许可证

MIT