vue 多個組件導入 require.context()

如果頁面需要導入多個組件

import likeView from "@/components/detail/like-view.vue";
import hoverView from "@/components/detail/hover.vue";
import animationView from "@/components/detail/animation.vue";

components: {likeView , hoverView , animationView}

爲了避免大量重複代碼，可以使用require.context()，無論組件有多少都不需要手動再次添加了

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)
})
components:modules

require.context

一個webpack的api,通過執行require.context函數獲取一個特定的上下文,主要用來實現自動化導入模塊,在前端工程中,如果遇到從一個文件夾引入很多模塊的情況,可以使用這個api,它會遍歷文件夾中的指定文件,然後自動導入,使得不需要每次顯式的調用import導入模塊。

// 語法: 
require.context(directory, useSubdirectories = false, regExp = /^.//);

require.context函數接受三個參數

• directory {String} -讀取文件的路徑
• useSubdirectories {Boolean} -是否遍歷文件的子目錄
• regExp {RegExp} -匹配文件的正則