Vue 遍历注册组件 require.context()

1、引入多个组件

require.context(directory,useSubdirectories,regExp)

参数：

directory：表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp：匹配文件的正则表达式。一般是文件名
例如 require.context("@/views/components",false,/.vue$/)

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
export default{
    ...
    components:modules
}

2、在main.js中引入大量公共组件

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

import Vue from 'vue';

import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';


// 加载组件
const loadComponent = (requireComponent) => {
  requireComponent.keys().forEach((fileName) => {
    // Get the component config
    const componentConfig = requireComponent(fileName);

    // Get the PascalCase version of the component name
    try {
      const componentName = upperFirst(camelCase(componentConfig.default.name));

      // Globally register the component
      Vue.component(componentName, componentConfig.default || componentConfig);
    } catch (e) {
      // console.error(e);
    }
  });
};
// 加载全局组件
const globalComponent = require.context(
  // 其组件目录的相对路径
  '../components/',
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /_base\.vue$/,
);

loadComponent(globalComponent);

参考：

src/icons/index.js

const context = require.context("./svg", true, /\.svg$/)
context.keys().map(context)

main.js

import '@/icons'

对context进行解析: