分享Vue3中的一个路由加载函数，基于Glob导入模式，根据路径自动生成路由

哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！

专注前端领域10年+，专门分享那些没用的前端知识！

今天要分享的内容，是一段路由加载的函数代码，这段代码能自动读取目录中的*.vue文件，并将他们自动组装成Vue3的路由。

前言

在现代前端开发中，单页面应用（SPA）已成为主流，Vue.js作为一个轻量级且功能强大的前端框架，被广泛应用于各种项目中。

在Vue3中，Vue Router是其官方提供的路由管理器，用于处理不同视图之间的切换。在大型项目中，手动定义所有路由可能会变得繁琐且容易出错。

因此，编写一个能够根据文件结构自动生成路由的函数，可以极大地提高开发效率。本文将分享一个这样的函数，希望对你有所帮助。

需求分析

假设我们有这么一个目录结构

文章配图

那我们的需求就是，将目录结构转换为如下可访问的链接：

http://host/car
http://host/device
http://host/env
http://host/index
http://host/people
......

技术点

Vue3 和 Vue Router：Vue3 提供了更强大的组合式 API，Vue Router 也进行了相应的更新，支持更好的类型检查和模块化管理。
文件遍历：使用Vite的 import.meta.glob 函数来遍历项目目录，获取所有组件文件路径。
动态路由生成：根据获取的文件路径，动态生成 Vue Router 的路由配置。

实现步骤

1. autoImportVueRouter函数的实现代码

下面我在项目中使用的示例代码，用于根据指定目录下的 Vue 组件文件自动生成路由配置。

// file: autoImportVueRouter.tsexport default function autoImportVueRouter () : Array<VueRouter.RouteRecordRaw> {// 加载views下的所有文件，注意：这里的路径`@`const views = import.meta.glob('@/views/**/**.vue')// 标识index.vue路径是否存在   let indexExist = falseconst subRouter: Array<VueRouter.RouteRecordRaw> = Object.keys(views).map(function (key:string) {const component = views[key]const path = key.toLowerCase().replace(/\.vue$/, '').replace(/.+\/views/g, '')if (path === '/index') indexExist = truereturn {path,component}})// 标识index.vue路径必须存在，否则首页不知道往跳转if (!indexExist) throw new Error('src/views目录下必须存在Index.vue')return subRouter
}

上面函数的关键代码就是import.meta.glob('@/views/**/**.vue')，它能从文件系统中导入多个模块。

这里是该函数的介绍：https://vitejs.cn/vite5-cn/guide/features.html#glob-import

2. 该函数内的注意点

另外需要注意的一个点，是路径'@/views/**/**.vue'中的@符号，它需要在vite.config.ts中进行别名的配置。如果使用ts，还需要在tsconfig.json中进行配置，这样才能排除相对路径对函数引用造成的影响。比如，

import { defineConfig } from 'vite'
import * as path from 'node:path'export default defineConfig({resolve: {alias: {// 别名'@': path.resolve(__dirname, 'src')}}//...其他配置
})

3. 函数引用

在 Vue Router 配置文件中使用这个生成的路由：

import * as VueRouter from 'vue-router'
import autoImportVueRouter from './autoImportVueRouter'const router = VueRouter.createRouter({history: VueRouter.createWebHistory('/'),routes: [// 首页重定向，配合autoImportVueRouter函数内的if判断{path: '/',redirect: '/index'},// 使用路由...autoImportVueRouter(),// 其他路由全部返回404{path: '/:pathMatch(.*)*',redirect: '/404'}]
})export default router;

至此，整个调用流程就实现了，后续无论新增/删除了什么文件，再次打包构建之后，我们都不需要再去修改维护我们的路由模块了。

对于大型项目，或者一部分懒人，这个方式引入路由非常的方便！

举一反三

通过vite的glob的多模块导入功能，我们还可以做更多的事情。比如，

全局组件自动加载：与路由的差别只是将路由变成了组件，然后利用组件的全局注册功能，将组件自动加载到项目中，方便其他各个页面调用。
批量导入多个图片/资源：图片或其他资源也可以类似操作，然后在脚本中拿到它们，这在做图片循环的时候也是比较常用的。
项目所有内容全部批量导入，构造一个基于配置的项目架构：无论图片、模块、路由等，全部可以通过glob导入，这样就可以根据自身项目情况来解析它们，将其抽离成配置文件后，就形成了一套固定的开发流程。如果想要完全掌控项目，这么做是非常有必要的。