主要使用webpack中require.context方法

/* 
require.context(directory, useSubdirectories, regExp)
directory: 要查找的文件路徑  
useSubdirectories: 是否查找子目錄
regExp: 要匹配文件的正則
*/ 
import demandRelatedDefect from "@/components/demand/demand-related-defect.vue"; //基礎(chǔ)靜態(tài)組件

// import NonFunctionalSafety from "@/components/demand/Non-functional-safety.vue"; //需要引入動態(tài)組件的正常寫法

let components = {
  demandRelatedDefect
}

//找到components文件夾下以.vue命名的文件
const introductions = require.context('@/components/customization/demand/', true, /\.vue$/); // 返回值是函數(shù)
const introductionsLength = introductions.keys(); // 返回值是個數(shù)組["./A.js", "./B.js", "./C.js", "./D.js"]
if(introductionsLength.length){ // 路徑./app/ 包含 .vue文件
  introductionsLength.forEach(fileName => { //遍歷組件
    const componentConfig = introductions(fileName); //動態(tài)引入 ./app/Non-functional-safety.vue
    console.log(fileName)
    components['NonFunctionalSafety'] = componentConfig.default || componentConfig;  //注冊組件
  });
}


export default {
  name: 'demand-detail',
  components: components
  /* components: { //靜態(tài)寫法
    demandRelatedDefect, demandRelatedDefect
  } */
}