vue批量引入components组件

平时项目开发中引入组件都是用下面的方式来移入

import A from './components/a.vue'

有时候某个页面功能很多，需要拆分成多个模块。
这个时候我们通常想到的都是下面的方式，几个还好，万一有几十个呢

废话不多说直接上干货！！！

vite

vite批量引入components组件

   // 批量引入组件
  const files = import.meta.globEager('./components/*.vue')
  const coms = {}
  // 遍历生成对象集合
  for (const key in files) {
    const com = files[key].default
    coms[com.name] = com
  }

vite批量获取components组件路径

const files = import.meta.glob('./components/*.js')

webpack

  // 引入组件
  const model = require.context('./components', true, /\/index.vue$/)
  // const model = require.context('./components', true, /\.vue$/)
  let components = {}
  model.keys().forEach(item => {
    let comp = model(item)
    components[comp.default.name] = comp.default
  })

创作不易，点个赞吧~