vite-plugin-scan-routes

一个基于 vue-router 和目录结构生成配置式路由的 vite 插件。

安装

npm i -D vite-plugin-scan-routes

使用

配置 vite.config.ts

import vue from '@vitejs/plugin-vue'
import { defineConfig, type UserConfig, type ConfigEnv } from 'vite'
import scanRoutes from 'vite-plugin-scan-routes'


export default defineConfig((config: ConfigEnv): UserConfig => {
    
    return {
        plugins: [
            vue(),
            scanRoutes()
        ]
    }
})

目录结构

project/ 
├── src/
│ ├── views/ # 自动扫描的视图目录
│ │ ├── home/ # 示例路由目录
│ │ │ ├── index.vue # 路由组件
│ │ │ └── index.ts # 路由元数据 (可选)
│ │ └── [id]/ # 动态路由示例
│ │   ├── index.vue
│ │   └── index.ts

ts 类型支持

/// <reference types="vite-plugin-scan-routes/client" />
import { routes } from 'virtual:scan-routes'