正常引入icon组件库
import * as Icons from '@ant-design/icons-vue'
// 循环使用全部全部图标
const icons: any = Icons
for (const i in icons) {
// 全局注册一下组件
app.component(i, icons[i])
}
此时打包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组件包还在说明没有配置成功哦
