【Vue3 工程自动化】自动导入多个组件

工程自动化参考视频

概述

在前端工程中，如果一个文件夹中的模块需要频繁引用，则可以使用如下自动化方式，实现一次性引入。

一、Vue2.X 版本：require.context()

• require.context(dirname,useSubdirectories,RegExp) 是一个 webpack 的 api，通过该函数可以获取一个上下文，从而实现工程的自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）

• 参数

  • dirname 需要检索的目录。String类型
  • useSubdirectories 指定是否需要检索子文件夹。Boolean类型
  • regExp 匹配文件的正则表达式。一般为文件名

• 返回结果

  • resolve 接受一个参数request，request为文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径。Function类型
  • keys 返回一个数组，由匹配成功的文件所组成的数组。Function类型
  • id 执行环境的 id。String类型

• 示例：

  // 检索 components 目录下的 .vue 文件
  const files = require.context("