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.文件对应位置展示图

相关推荐
麦麦大数据1 天前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区1 天前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗1 天前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长1 天前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅1 天前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_1 天前
Chrome开发者工具
前端·chrome
YiHanXii1 天前
this 输出题
前端·javascript·1024程序员节
楊无好1 天前
React中ref
前端·react.js
维他命Coco1 天前
js常见开发学习
javascript
程琬清君1 天前
vue3 confirm倒计时
前端·1024程序员节