@ant-design/icons-vue按需引入icon

程序员 · 2024-9-12 22:04:07

正常引入icon组件库

import * as Icons from '@ant-design/icons-vue'// 循环使用全部全部图标const icons: any = Iconsfor (const i in icons) {  // 全局注册一下组件  app.component(i, icons)}此时打包npm run build

icons组件占用的资源很多，但是我们用到的icon不多，怎样做到按需加载呢下面通过vue.config.js设置办理这个题目
重点

是下面设置，这里的意思是读取@ant-design/icons-vue组件路径改成了resolve('./src/assets/antd/icons.js')；通过读取这个文件中的icons镌汰不必要的icons组件打包时占用空间
vue.config.js中设置
configureWebpack
config.resolve = {    alias: {       '@': resolve('src'),       // 按需加载icons       '@ant-design/icons-vue$': resolve('./src/assets/antd/icons.js')    } } icons.js
用到的icon直接添加即可
export {  default as LogoutOutlined} from '@ant-design/icons-vue/lib/icons/LogoutOutlined'export {  default as HomeOutlined} from '@ant-design/icons-vue/lib/icons/HomeOutlined'然后再次实行npm run build效果icons组件库就没有了，阐明已经更换掉了

再看下页面icon是否正常表现，假如正常表现阐明设置乐成了

留意：正常表现的话，实行npm run buildicons组件包还在阐明没有设置乐成哦

@ant-design/icons-vue按需引入icon

所属分类: 问答交流

新帖推荐: 30日

推荐作品