平时项目开发中引入组件都是用下面的方式来移入
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
})
创作不易,点个赞吧~