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?
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~