//main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' import Antd from 'ant-design-vue' import * as antIcons from '@ant-design/icons-vue' // 引入ant icons import 'ant-design-vue/dist/antd.css'; const app = createApp(App); const antIconsList: any = antIcons; // 重新赋值定义类型 避免后续遍历注册组件的时候ts报错 // 注册组件 // Object.keys(antIconsList).forEach(key => { // app.component(key, antIconsList[key]) // }) for (const key in antIconsList) { app.component(key, antIconsList[key]) } app.config.globalProperties.$antIcons = antIcons; // 挂在到vue实例上 app.use(router).use(createPinia()).use(Antd).mount('#app') <!-- .vue --> <component :is="proxy.$antIcons[item.meta.icon]" /> // .vue import { getCurrentInstance } from "vue"; const { proxy } = getCurrentInstance(); // route.ts export const Home = [ { path: '/index', name: 'index', meta: { title: '首页', hide: false, icon: 'HomeOutlined' // 引入ant 的icon名称 }, redirect: `/home`, component: () => import('../views/home/index.vue'), children: [ { path: '/home', name: 'home', meta: { title: '系统首页', hide: false }, component: () => import('../views/home/home.vue') } ] } ]