使用場景

-在開發過程中,往往會有很多自己定義公用元件,我們通過import 匯入,components掛載到例項上就行,專案剛開始還好,但是隨著專案迭代,元件越來越多,同一個元件不同的方式用需要重複匯入掛載,就顯得冗餘
這裡是通過require.context的一種便捷操作

例項

檔案結構

component/modal裡存放的是我們定義的公共DOM元件

// 匯入Vue, 需要使用Vue.component()方法註冊元件
import Vue from 'vue'

// let f = r => {
//   return r.keys().map(key => r(key));
// }
//
// console.log(f(require.context('./modal', true, /\.vue/)));

// 將 ./modal 下的所有元件全部讀取出來
//
//
// requireComponents: ƒ webpackContext(req) {
//     return __webpack_require__(webpackContextResolve(req));
// }

/**
 * @var requireComponents -- requireComponents儲存每個檔案的相對路徑的集合,可通過keys()返回
 * @function requireComponents -- 也是個方法,傳入keys()枚舉出來的路徑可返回元件例項
 */

const requireComponents = require.context('./', true, /\.vue/);
// 列印結果
// requireComponents: ƒ webpackContext(req) {
//     return __webpack_require__(webpackContextResolve(req));
// }
//

// 遍歷出每個元件的路徑
requireComponents.keys().forEach(fileName => {
  // 元件例項
  const reqCom = requireComponents(fileName)
  // 擷取路徑作為元件名
  const reqComName = fileName.split('/')[1]
  // 元件掛載
  Vue.component(reqComName, reqCom.default || reqCom)
})
 

具體的只要打印出來就一目瞭然,這裡不做贅述

原文地址：https://segmentfault.com/a/1190000017159449