nuxt3引入Ant Design Vue4.0.8版本报错 500 [vite-node] [ERR_LOAD_URL] ant-design-vue/dist/antd.css

引入全流程

下载

npm i --save ant-design-vue

配置

新建 /plugins/xx.ts 插件文件

import Antd from "ant-design-vue";
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Antd)
})

nuxt.config.ts 中

引入css

export default defineNuxtConfig({
  css: [ "ant-design-vue/dist/antd.css"],
});

导入插件

export default defineNuxtConfig({
  plugins: ["/plugins/xx.ts"],
});

测试使用

<template>
  <div>
    <a-button>Primary Button</a-button>
  </div>
</template>

嘎嘎报错

查问题

提示找不到antd.css文件那顺着路径找

真没有，但是有一个reset.css文件，尝试引入这个

nuxt.config.ts 中

修改引入的css文件目录

export default defineNuxtConfig({
  css: [ "ant-design-vue/dist/reset.css"],
});

导入成功
官网4.0.8中的全局注册引入的css文件名称也是reset.css
链接地址
https://www.antdv.com/docs/vue/getting-started-cn
截图