Vite 按需导入 ant-design-vue Icon 组件问题
按照Ant Design Vue 的示例中,有按需加载组件,正常的组件可以正常使用,然而当使用ICON组件时,给的例子无法动态加载ICON。
后来发现,需要在项目开始的时候 main.ts 中 引入 ant-design/icons-vue 后循环注册组件。
但是,根据在网上查询的结果都是在app.mount('#app') 后注册,导致在页面使用中经常出现 Icon 组件不显示问题。
import {createApp} from 'vue' import App from './App.vue' import * as Icons from "@ant-design/icons-vue"; const icons: any = Icons; const app = createApp(App) app.mount('#app') for (const i in icons) { // 循环注册组件 app.component(i, icons[i]); }
代码修改为后页面初始化可以正常显示图标
import {createApp} from 'vue' import App from './App.vue' // 导入图标库 import * as Icons from "@ant-design/icons-vue"; const app = createApp(App) // 开始使用全局图标 const icons: any = Icons; for (const i in icons) { // 循环注册组件 app.component(i, icons[i]); } app.mount('#app')