vue模块化导入

以下针对vue2、vue3两种不同情况，使用router路由模块化进行举例

一、vue2

1.webpack提供的require.context

const files = require.context("./modules/", true, /\.js$/);

2.完整代码片段

// src/router/routers/index.js
// 创建一个上下文
const files = require.context("./modules/", true, /\.js$/);// 获取匹配的文件路径数组
const filePath = files.keys();const appRouters = []filePath.forEach((path) => {const module = files(path).default;appRouters.push(...module)
});export default appRouters

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '@/config/router.config'
import appRouters from "./routers/index"try {const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}
} catch (e) {
}Vue.use(Router)export default new Router({mode: 'history',base: process.env.VUE_APP_CONTEXT_PATH,scrollBehavior: () => ({ y: 0 }),routes: [...constantRouterMap, ...appRouters]
})

3.文件对应位置展示图

二、vue3

1.import.meta.globEager

const modules = import.meta.globEager("./modules/*.ts");

2.import.meta.glob

vite glob-import 官方文档

const modules = import.meta.glob("./modules/*.ts", {eager: true,
});

3.完整代码片段

// src/router/routers/index.ts
import type { RouteRecordNormalized } from "vue-router";const modules = import.meta.glob("./modules/*.ts", {eager: true,
});function formatModules(_modules: any, result: RouteRecordNormalized[]) {Object.keys(_modules).forEach((key) => {const defaultModule = _modules[key].default;if (!defaultModule) return;const moduleList = Array.isArray(defaultModule)? [...defaultModule]: [defaultModule];result.push(...moduleList);});return result;
}export const appRoutes: RouteRecordNormalized[] = formatModules(modules, []);

// src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import { appRoutes } from "./routers";const routes = [{path: "/",redirect: "/login",},{name: "login",path: "/login",component: () => import("@/views/user/login/index.vue"),meta: {title: "登录",},},...appRoutes,{path: "/:pathMatch(.*)",redirect: "/",},
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

4.文件对应位置展示图