ant文件放在ps的哪里_ant design vue按需导入icons

由于最近项目上线首页加载问题，从各方面进行优化减少体积，包括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按需导入已完成，如果有什么问题，欢迎留言讨论，共同学习