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')