正常引入icon組件庫(kù)
import * as Icons from '@ant-design/icons-vue'
// 循環(huán)使用全部全部圖標(biāo)
const icons: any = Icons
for (const i in icons) {
// 全局注冊(cè)一下組件
app.component(i, icons[i])
}
此時(shí)打包npm run build
icons組件占用的資源很多锤窑，但是我們用到的icon不多棱诱，怎樣做到按需加載呢下面通過(guò)
vue.config.js配置解決這個(gè)問(wèn)題
重點(diǎn)
是下面配置撵枢，這里的意思是讀取@ant-design/icons-vue組件路徑改成了resolve('./src/assets/antd/icons.js')池颈；通過(guò)讀取這個(gè)文件中的icons減少不必要的icons組件打包時(shí)占用空間
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'
然后再次執(zhí)行npm run build結(jié)果icons組件庫(kù)就沒(méi)有了贩毕，說(shuō)明已經(jīng)替換掉了
再看下頁(yè)面icon是否正常顯示落萎，如果正常顯示說(shuō)明配置成功了
注意：正常顯示的話亥啦，執(zhí)行
npm run buildicons組件包還在說(shuō)明沒(méi)有配置成功哦
