require.context()用法详解

2023-06-23 19:59| 来源: 网络整理| 查看: 265

文章目录前言一、require.context(directory,useSubdirectories,regExp)使用参数属性二、使用

前言

require.context() 是 Webpack 提供的 API，用于在运行时动态地导入模块，在 Vue.js 项目中常用于自动注册路由、组件等功能。

一、require.context(directory,useSubdirectories,regExp)使用参数

const routeFiles = require.context(‘…/router/main’, true, /.ts/)

上述代码表示在 ../router/main目录中（相对于当前文件所在的目录），递归地寻找所有以 .ts 结尾的文件，并返回一个函数。返回的函数有三个属性。

directory：导入文件路径useSubdirectories：是否递归regExp：正则表达式属性

keys()：返回匹配的文件路径列表。

resolve()：返回匹配的模块绝对路径。

Context(key: String)：返回对应路径的模块的默认导出。

二、使用

代码如下（示例）：

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = []; const files = require.context('../router/main', true, /\.ts/); files.keys().forEach(key => { const fileName = key.replace(/(.*\/)*([^.]+).*/gi, "$2"); // 提取文件名 if (fileName.toLowerCase() !== "index") { // 排除 index.ts const routeModule = files(key); routes.push(...routeModule.default); // 拼接路由到 routes 数组中 } }); const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router;

这个代码通过 require.context 加载 …/router/main 下所有以 .ts 结尾的文件，筛选出不是 index.ts 的文件，然后将这些文件中的路由添加到 routes 数组中，最后通过 VueRouter 的构造函数生成路由实例并导出。

这样我们只需要在 …/router/main 目录下添加新的路由文件，在项目启动时，Webpack 就会自动将这些路由注册到路由表中。

【本文地址】

公司简介

联系我们