ant文件放在ps的哪里_ant design vue按需导入icons
由于最近項(xiàng)目上線首頁加載問題,從各方面進(jìn)行優(yōu)化減少體積,包括icon的按需導(dǎo)入,借此記錄一下
1.首先需要創(chuàng)建一個(gè)icon.js,我是直接在src的utils中創(chuàng)建的(可以根據(jù)自己需要,在對應(yīng)路徑創(chuàng)建)
icon.js
......
// 此處寫你項(xiàng)目所需圖標(biāo)名稱,一般fill對應(yīng)的是你所用其他控件內(nèi)置的圖標(biāo)如日歷,outline一般對應(yīng)你a-icon對應(yīng)的圖標(biāo),不過不能一概而論,具體還是得根據(jù)實(shí)際情況
export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline'
export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill'
.......
// 最后留一行換行,好像說是如果不留會影響編譯之類(ps:此操作借鑒其他博客,當(dāng)然也可以不留一行嘗試一下編譯)
2.然后在vue.config.js中配置,此處是vue-cli3的,所以在這里配置,不同版本的得在對應(yīng)的webpack配置文件里配置
vue.config.js
......
configureWebpack: {
resolve: {
alias: {
'@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/utils/icon.js') // 自建的文件的相對路徑
}
}
}
......
至此,icon按需導(dǎo)入已完成,如果有什么問題,歡迎留言討論,共同學(xué)習(xí)
總結(jié)
以上是生活随笔為你收集整理的ant文件放在ps的哪里_ant design vue按需导入icons的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 拼多多拼小圈如何取消自动添加好友 拼多多
- 下一篇: ajax 与route的区别,浅析vue