require.context(directory,useSubdirectories,regExp)
1.directory:表示檢索的目錄
2.useSubdirectories：表示是否檢索子文件夾
3.regExp:匹配文件的正則表達式,一般是文件名
例如?require.context("@/views/components",false,/\.vue$/)
1拦止、常常用來在組件內(nèi)引入多個組件吊档。
const path=require('path')
const files=require.context('@/components/home',false,/\.vue$/)
const modules={}
files.keys().forEach(key=>{
const name=path.basename(key,'.vue')
modules[name]=files(key).default||files(key)
})
exportdefault{
...components:modules
}
2炫彩、在main.js中引入大量公共組件
importVuefrom'vue'
// 自定義組件
const requireComponents=require.context('../views/components',true,/\.vue/)
// 打印結(jié)果
// 遍歷出每個組件的路徑
requireComponents.keys().forEach(fileName=>{
// 組件實例
const reqCom=requireComponents(fileName)
// 截取路徑作為組件名
const reqComName=reqCom.name||fileName.replace(/\.\/(.*)\.vue/,'$1')
// 組件掛載
Vue.component(reqComName,reqCom.default||reqCom)
})
