首先簡單介紹一個語法

require.context()

這是webpack中的一個API，能做到遍歷一個資料夾中的指定檔案並自動引入

現在要實現的也就是：遍歷指定檔案的同時將它註冊

在main.js中 程式碼實現：

import Vue from 'vue'

const componentsContext = require.context('./components', true, /index.vue$/)
 // require.context() 第一個引數就是需要註冊的元件的位置
componentsContext.keys().forEach(component => {
    
 
// 獲取檔案中的 default 模組
    const componentConfig = componentsContext(component).default
    Vue.component(componentConfig.name, componentConfig)
　　// componentConfig.name 就是元件名稱
})

首先通過require.context()獲取 ./components 目錄下所有資料夾裡的 index.vue 檔案，然後迴圈依次讀取檔案中的 default 模組，並使用元件的name做為元件名進行元件註冊。

有一點需要注意，因為獲取的是目錄下的元件名name進行註冊， 所以在需要註冊的元件中必須宣告元件名 name

export default {
    name: '元件名'
}

require.context