vite vue3 全局批量注册组件
方式1-使用import.meta.glob
同webpack的 require.context
一样,这个是vite提供的一个方法
import { createApp, defineAsyncComponent } from 'vue'
const app = createApp(App);
app.mount('#app');
// antd全局使用图标,遍历引入
const icons: any = Icons
for (const i in icons) {
app.component(i, icons[i])
}
// 注册全局组件
const requireModules = import.meta.glob('./components/**.vue', { eager: true });
for (const path in requireModules) {
const moduleName = path.match(/.*\/(.+).vue$/)[1];
const moduleConent = requireModules[path].default;
console.log(moduleName, defineAsyncComponent(moduleConent));
app.component(moduleName, defineAsyncComponent(moduleConent));
}
注意
import.meta.glob可以接受一个参数,来做个对比
同步
const requireModules = import.meta.glob('./modules/**/*.ts', { eager: true });
for (const path in requireModules) {
const moduleConent= requireModules[path];
console.log(moduleConent.default);
}
异步
const requireModules = import.meta.glob('./modules/**/*.ts');
for (const path in requireModules) {
const moduleConent= requireModules[path];
moduleConent().then((mod) => {
console.log('moduleConent', mod.default);
})
}
方式2-使用unplugin-vue-components
安装依赖
yarn add --dev unplugin-vue-components
vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite"; // 按需加载自定义组件
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
// 按需引入
dts: true,
dirs: ["src/components"]
}),
],
});