Vue 引入指定目錄文件夾所有的組件 require.context

require.context

• require.context是webpack中用來管理依賴的一個函數,此方法會生成一個上下文模塊，包含目錄下所有的模塊的引用，同構正則表達式匹配,然后require進來

使用場景

• 我們在一個業務模塊的list中要使用components下所有組件，手動一個一個引入如下圖
  

-改善，使用 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>