vue3+vite,自动按需引入ant-design-vue3x报错

1、安装插件：ant-design-vue插件、自动按需导入插件

//安装ant-design-vue 该命令安装版本为   "ant-design-vue": "^4.0.3",

//使用npm或者 yarn安装
npm i ant-design-vue --save 
yarn add ant-design-vue 

//网络环境不佳可选择以下安装
cnpm i ant-design-vue --save 

​//npm安装或者yarn安装
npm i unplugin-vue-components -D
yarn add unplugin-vue-components -D

//网络环境不佳可选择以下安装
cnpm i unplugin-vue-components -D
​

 2、在vite.config.js文件中配置一下内容

import vue from '@vitejs/plugin-vue';

import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';


export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false,//是否需要自动随引入加载对应的组件样式
         })
       ],
    }),
  ],
});

3、完成以上步骤，即可在页面直接引入ant-design-vue的组件了

总结：在ant-design-vue3.x官网给的vite.config.js配置是一下

但页面直接引入组件会报错，

报错的原因：ant-desing-vue从 'ant-design-vue/dist/antd.css'下导入样式，使用插件在'ant-design-vue/es/antd.css'目录下导入，导致找不到该模块。

因此需要在 AntDesignVueResolver 中添加 importStyle: false 可解决报错原因。

项目package.json信息