vite-plugin-route-generator

Simplify the routing configuration of the Vue project. Use this plug-in to generate project routes through file directory conventions.

English 简体中文

Usage

vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import { viteRoutesGenerator } from 'vite-plugin-route-generator';

export default ({ mode }) => {
  return defineConfig({
    plugins: [
      viteRoutesGenerator({ path: 'src/views' })
    ]
  });
};

src/router/index.ts

import { createRouter, createWebHistory} from 'vue-router';
import { routesGenerator } from 'virtual:routes-generator';

const route = routesGenerator();
const router = createRouter({
  history: createWebHistory(),
  routes: route
});

export default router;

src/vue-shims.d.ts

/// <reference types="vite/client" />
+ /// <reference types="vite-plugin-route-generator/typings.d.ts" />

declare module '*.vue' {
  import { App, defineComponent } from 'vue'
  const component: ReturnType<typeof defineComponent> & {
    install(app: App): void
  }
  export default component
}

Add a line /// <reference types="vite-plugin-route-generator/typings.d.ts" />

main.ts

import { createApp } from 'vue';
import router from './router';
import App from './App.vue';
const app = createApp(App);
app.use(router);

Directory structure

root
├─src
│  ├─views
│  │   ├─About
│  │   │   └─index.vue
│  │   ├─Home
│  │   │   └─index.vue
│  │   │User
│  │   │   ├─[id]
│  │   │   │   └─index.vue
│  │   │   └─index.vue
│  │   ├─Duty
│  │   │   ├─Task
│  │   │   │   ├─TaskList
│  │   │   │   │   └─index.vue
│  │   │   │   └─index.vue
│  │   │   └─DutyHome
│  │   │       └─index.vue

The generated data structure

[
  {
    "name": "About",
    "path": "/about"
  },
  {
    "name": "Duty",
    "path": "/duty",
    "children":
      [
        {
          "name": "DutyHome",
          "path": "duty-home"
        },
        {
          "name": "Task", 
          "path": "task",
          "children":
            [
              {
                "name": "TaskList",
                "path": "task-list"
              }
            ]
        }
      ]
  },
  {
    "name": "Home",
    "path": "/home"
  },
  {
    "name": "User",
    "path": "/user",
    "children": [{ "name": "Id", "path": ":id" }]
  }
]