vue如何批量引入组件注册的方法，读取文件夹所有文件

当在vue中想要批量引入组件进行注册时，可以使用webpack提供的require.context()方法

语法 & 默认值

require.context(
    directory,
    (useSubdirectories = true),
    (regExp = /^./.*$/),
    (mode = 'sync')
);

参数说明：

• directory {String} -文件夹目录路径
• useSubdirectories {Boolean} -是否包含子目录
• regExp {RegExp} -匹配文件名的正则表达式
• mode {String} = ‘sync’ 同步 | ‘async’ 异步

注意：参数必须为字面量（具体的值），不能是变量，在路径中使用变量可能会报错或者获取不到文件

返回值 & 属性

require.context()运行后返回的是一个函数（{Function}，实际上有点像一个类），有3个属性，即假如

    const modules = require.context("./", false, /s\.vue$/)

那么modules对象就可以点出来有以下3个属性：

• resolve {Function} -传入文件路径参数，返回文件的id（实际上小编打印出来是一个根目录路径）
• keys {Function} -获取模块对象的所有文件的相对路径数组
• id {String} -模块对象的id

3个属性的例子截图

在同目录下，在index.vue中引入其他组件：

打印出来3个的结果截图：

有了这个3个属性/方法，就可以做点事情啦；看例子

参考例子：

其实就是上面截图的例子，在同一个目录下，有bars.vue、index.vue、menus.vue三个文件，想在index.vue文件中导入其他两个文件：

<script>
    const modules = require.context("./", false, /s.vue$/)
    console.log(modules.resolve("./bars.vue"))
    console.log(modules.keys())
    console.log(modules.id)

    const compos = {}
    modules.keys().forEach((path)=>{
        //拼成引用的键值对

        //1.获取组件实体，跟import()是一个意思 
        const compo = modules(path)
        //2、组件注册名，从文件路径截取文件名，这个可以看自己实际情况写方法
        const compoName = path.split("/")[1].replace(/.vue$/,"")// ./bars.vue ==> bars
        //3、放进compos，{bars: import("./bars.vue")}
        compos[compoName] = compo.default || compo
    })

    export default {
        components:{
            ...compos
        }
    }
</script>

看了应该会用了吧，下面我把这个方法的源码贴出来，可能你会更加明白：

参考资料：
https://webpack.js.org/guides/dependency-management/