vue项目文件系统路由

webpack 文件系统路由

方法一：vue-router模块划分

参考文档：vue-router模块划分 - 掘金

vite 文件系统路由

方法一：vite-plugin-pages 使用 Vite 为 Vue 3 / React / Solid 应用程序提供基于文件系统的路由

插件地址

GitHub - hannoeru/vite-plugin-pages: File system based route generator for ⚡️Vite

使用方法（以vue3为例）

安装

npm install -D vite-plugin-pages
npm install vue-router

Vite config 快速设置

添加如下配置到您的 vite.config.js ：

import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    Pages({
        dirs: 'src/views',
        extensions: ['vue', 'jsx'],
        // 排除文件
        exclude: ['**/components', '**.js'],
      }),
  ],
}

vue-router中使用

// vite-plugin-pages 配置路由
import routes from '~pages';

const router = createRouter({
  history: createWebHistory('/'),
  routes: [...routes, ...baseRoutes],
});

方法二：vite 使用import.meta.glob动态添加vue页面

参考文档：vite 使用import.meta.glob动态添加vue页面_圆圆爱喝可乐的博客-CSDN博客

使用方式：

//引入所有views下.vue文件 
const modules = import.meta.glob("../views/**/**.vue")

export const routerPackag = function (routers: any) {
  if (routers) {
    routers.filter((itemRouter: any) => {
      if (itemRouter.component != "Layout") {
        router.addRoute("home", {
          path: `${itemRouter.path}`,
          name: itemRouter.name,
          meta: {
            title: itemRouter.name,
          },
          component:
            modules[·../views/${itemRouter.component}`],
        })
      }
    })
  }
}