由于最近項目上線首頁加載問題，從各方面進行優化減少體積，包括icon的按需導入，借此記錄一下

1.首先需要創建一個icon.js，我是直接在src的utils中創建的(可以根據自己需要，在對應路徑創建)

icon.js

......

// 此處寫你項目所需圖標名稱，一般fill對應的是你所用其他控件內置的圖標如日歷，outline一般對應你a-icon對應的圖標，不過不能一概而論，具體還是得根據實際情況

export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline'

export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill'

.......

// 最后留一行換行，好像說是如果不留會影響編譯之類(ps：此操作借鑒其他博客，當然也可以不留一行嘗試一下編譯)

2.然后在vue.config.js中配置，此處是vue-cli3的，所以在這里配置，不同版本的得在對應的webpack配置文件里配置

vue.config.js

......

configureWebpack: {

resolve: {

alias: {

'@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/utils/icon.js') // 自建的文件的相對路徑

}

}

}

......

至此，icon按需導入已完成，如果有什么問題，歡迎留言討論，共同學習

總結

以上是生活随笔為你收集整理的ant文件放在ps的哪里_ant design vue按需导入icons的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。