vue模块化导入

vue模块化导入

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

一、vue2

1.webpack提供的require.context

javascript 复制代码
const files = require.context("./modules/", true, /\.js$/);

2.完整代码片段

javascript 复制代码
// 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
javascript 复制代码
// 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

typescript 复制代码
const modules = import.meta.globEager("./modules/*.ts");

2.import.meta.glob

vite glob-import 官方文档

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

3.完整代码片段

typescript 复制代码
// 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, []);
typescript 复制代码
// 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.文件对应位置展示图

相关推荐
真的想不出名儿19 小时前
登录前验证码校验实现
java·前端·python
小高00719 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
云舟吖19 小时前
Playwright的元素定位器
前端
我是日安19 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
吹晚风吧19 小时前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors
浅浅的学一下19 小时前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端
wifi歪f20 小时前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
BrendanDash20 小时前
React 19.2 已发布,现已上线 npm!
前端·react.js
sheji341620 小时前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘
whltaoin20 小时前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型