vue项目中使用require.context()进行组件的循环注册

require.context()方法

• 作用：创建当前模块的上下文
• 用法：require.context(directory, flag, regExp)

  directory: 要导入的当前模块的文件夹目录
  flag: 是否搜索当前路径的子目录
  regExp: 要匹配的文件

• require.context()方法导出模块为一个函数，该函数有三个属性：resolve, keys, id
  1.resolve() :它返回请求被解析后得到的模块 id
  2.keys(): 返回当前所有搜索到的文件的数组
  3.id: 上下文模块里面所包含的模块 id

使用该方法进行组件的循环注册

import Vue from 'vue'
const components = require.context('../../components', true, /\.vue$/);
console.log(components.keys());
console.log(components.id);
components.keys().forEach(filename => {
    console.log(filename);
    console.log(components(filename));
    console.log(components.resolve(filename));
    let arr = filename.replace(/\.\//, '').replace(/\.vue$/, '').split('/');
    let componentName = 'v-' + arr[arr.length - 1];
    let componentConfig = components(filename).default;
    console.log(componentName);
    Vue.component(componentName, componentConfig);
})

ps: require.context()也可以进行多模块路由的自动导入配置