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} -匹配文件的正则