获取文件夹下的vue文件形成组件，require.context

本文主要是介绍获取文件夹下的vue文件形成组件，require.context，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言：项目中现有一个文件里面包含所有需要用到的组件，如果一个个的去import，则会非常麻烦，现有require.context去实现，

1、require.context

var request = require.context(‘./module’, true, /.js$/)
require.context()接收三个参数，第一个参数是要加载的文件目录地址，第二个参数是true或false，表示是否需要加载子目录，第三个参数是个正则表达式，表示要加载哪些文件，上面代码表示要加载module目录下的.js文件。
需要注意 require.context()的第一个参数不能是一个变量，webpack在编译阶段无法定位目录

2、实现代码

 const path = require("path")const modules = {}files.keys().forEach((key) => {const name = path.basename(key, ".vue")modules[name] = files(key).default || files(key)})return {components: modules}

最后在文件中导入使用
export default {
components:components
}

这篇关于获取文件夹下的vue文件形成组件，require.context的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---