1. 在webpack中使用require來獲取組件
/ 參數:1. 目錄 2. 是否加載子目錄 3. 加載的正則匹配 //匹配當前文件夾下的所有.vue文件 註冊全局組件 const importFn = require.context('./', false, /\.vue$/) // console.dir(importFn.keys()) 文件名稱數組 export default { install (app) { // 批量註冊全局組件 importFn.keys().forEach(key => { // 導入組件 const component = importFn(key).default // 註冊組件 app.component(component.name, component) }) } } // 在main.js中使用 import allComponent from '@/components/library/index.js' createApp(App) .use(store) .use(router) .use(allComponent) .mount('#app')
2. 在vite中使用 import.meta.glob
const app = createApp(App); // 批量註冊全局組件 const components = import.meta.glob('./components/uiSchema/itemComponents/*.vue') for (const [key, value] of Object.entries(components)) { const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.')) console.log('當前組件時',name); app.component(name, defineAsyncComponent(value)) }