中国建设银行行网站/六盘水seo

该文档是在升级ant-design-vue到4.x版本的时候遇到的问题

项目环境

"vue": "^3.3.4",
"ant-design-vue": "^4.0.0",
"vite": "^4.4.4",
"unplugin-vue-components": "^0.25.1"

以上是开发项目时使用的包以及包的版本，使用的脚手架是vite

问题场景

当使用ant-design-vue3.x版本时没有任何问题，但是当升级ant-design-vue到4.0版本时，因为ant-design-vue4.x使用了css-in-js需要修改vite.config.js配置

plugin:[Components({resolvers: [AntDesignVueResolver({importStyle: "less" })]}),]

变更为

plugin:[Components({resolvers: [AntDesignVueResolver({resolveIcons: true,cjs: true,importStyle: false})]}),]

修改后当开发环境正常展示的时候，打包出了问题，发现自定义的组件以及单文件中通过<style lang="css"></style>定义的样式都失效了，样式中的图片也自然失效了

通过观察发现打包生成的文件中存在样式，但是确没有被引用，一直没有找到有效的解决方案，在ant-design-vue官网中提到说是插件’unplugin-vue-components’会引发一些不可预测问题，尝试删除unplugin-vue-components的使用

解决方案

unplugin-vue-components 插件是一个按需引入的插件，所以删除该插件后，也要删除对应生成的 components.d.ts 文件，然后手动引入所有使用的 ant-design-vue 组件在打包后发现正常