Vue imports components components in batches

The components introduced in the usual project development are moved in the following way

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

Sometimes a page has many functions and needs to be split into multiple modules.
At this time, we usually think of the following methods, a few are okay, what if there are dozens of them?

insert image description here
Don't talk nonsense and go straight to the dry goods! ! !

fast

Vite imports components in batches

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

vite batch get components component path

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
  })

It's not easy to create, give me a thumbs up~

Guess you like

Origin blog.csdn.net/lyf976229437/article/details/124998243