Vue 引入指定目录文件夹所有的组件 require.context

时间：2025-02-21 18:05:38

require.context

  • require.context是webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块，包含目录下所有的模块的引用，同构正则表达式匹配,然后require进来

使用场景

  • 我们在一个业务模块的list中要使用components下所有组件，手动一个一个引入如下图

    Vue 引入指定目录文件夹所有的组件 require.context

-改善，使用 require.context 引入

// 导入所有组件

// 以 "dialog-" 开头,以".vue"结尾

const allComponents = require.context('./components', false, /^dialog.*\.vue$/)

let res_components = {}

allComponents.keys().forEach(fileName => {

  let comp = allComponents(fileName)

  res_components[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default

})

export default {

  name: 'purchase',

  components: res_components,

}

</script>

相关文章