require.context函数

2022-05-09 262 阅读1分钟

概述

在vue项目当中，当一个文件当中使用多个组件的时候，就会出现很多的import和注册，出现大量的重复代码的时候，就会使得文件看起来不是很简洁。require.context函数可以用来批量导入组件并注册。

语法

require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

具体用法

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('@/components', true, /\.vue/)
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =fileName.split("/")[1].split(".")[1]
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})