vue模块化导入

vue模块化导入

• • 一、vue2
  • • 1.webpack提供的require.context
    • 2.完整代码片段
    • 3.文件对应位置展示图
  • 二、vue3
  • • 1.import.meta.globEager
    • 2.import.meta.glob
    • 3.完整代码片段
    • 4.文件对应位置展示图

以下针对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.push
  Router.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.文件对应位置展示图