vite-plugin-auto-generate-routes

一个适用于 vue 3 的 vite 路由自动生成插件

为什么使用它

页面组件和路由配置信息高度耦合情况下可以使用它！这样以后每次新增页面组件后不再需要频繁的手动更新路由配置信息。假设你的目录如下：

/vue-project
  ├── src
  │   ├── router
  │   │   └── index.js
  │   ├── views
  │   │   ├── About
  │   │   │   ├── About.meta.js
  │   │   │   └── About.vue
  │   │   ├── Home
  │   │   │   ├── Home.meta.js
  │   │   │   └── Home.vue
  │   │   └── User
  │   │       ├── Index
  │   │       │   ├── Index.meta.js
  │   │       │   └── Index.vue
  │   │       ├── Profile
  │   │       │   ├── Profile.meta.js
  │   │       │   └── Profile.vue
  │   └── main.js
  └── vite.config.js

下载

npm：

npm i vite-plugin-auto-generate-routes -D

使用

在 vite.config.js 文件中引入插件并配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginAutoGenerateRoutes from 'vite-plugin-auto-generate-routes';

export default defineConfig({
  plugins: [
    vue(),
    VitePluginAutoGenerateRoutes({
      pagesDir: 'src/views',
      routesFile: 'src/router/autoRoutes.js'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})