vue3+vite - 安装引入Ant Design Vue组件库报错Failed t resolve import“ant-design-vue/dist/antd.css“ from x Does

已于 2025-01-16 15:42:15 修改
阅读量7.1k 收藏 3
点赞数 10
CC 4.0 BY-SA版权
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 vue常见问题解决 文章标签： vue3 vite ant-design-vue antd.css 安装引入antd报错解决 无法引入antd.css不存在 vue3+vite使用antd
于 2024-12-22 22:15:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/144653229

问题说明

在vue3+vite开发中，安装使用ant design vue报错Failed t resolve import"ant-design-vue/dist/antd.css" from x Does the file exist? 无法解析导入提示，npm安装antd组件库插件后，正常在main文件中全局引入，项目报错且无法继续调试了，提供详细解决方法。

其他教程都无法解决，在本文你只要报类似的错误就可以完美解决。

在这里插入图片描述

解决教程

首先分析问题，

了解本专栏 订阅专栏 解锁全文
vue3 - vite打包报错Rollup failed to resolve import “x/node_modules/ant-design-vue/x“ from “x“ This is mo
高级前端工程师
12-22 7632
vue3，vite，打包报错，ant design vue，vite 打包报错，vue3使用Vite打包报Rollup failed to resolve import “xxx/node_modules/ant-design-vue/xxxx，vite 打包报错：Error: [vite]: Rollup failed to resolve import，ant中time-range-picker组件没有直接导出，在使用vue3 + vite + ant design vue 的时候，引入一些antd的一
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 4987
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
【ant-design-vue】记录vue3项目安装ant-design-vue，引入样式时报错 Can‘t resolve ‘ant-design-vue/dist/antd.css‘
bbt953的博客
12-27 544
记录vue3项目安装ant-design-vue，引入样式时报错 Can't resolve 'ant-design-vue/dist/antd.css'
[plugin:vite:import-analysis] Failed to resolve import “vant/lib/index.css“ from “xxxxxx
yonghuid123453的博客
06-10 401
在安装npm install -S vant@2.12.2。先卸载 npm uninstall vant。
引入import ‘ant-design-vue/dist/antd.css‘时报错
weixin_50636942的博客
08-31 1万+
提示 Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css' in 'D:\yupi\antd-demo\src'初始化前端时候总拉不下来ant.css文件，这个路径ant-design-vue 不存在css文件。后来发现官方文档给的是错误的，css文件叫reset.css。在使用Ant Design Vue 时初始化项目报错。
开发笔记——vue引入ant-design-vue时css报错
醉眸颜入骨
05-20 5521
vue引入ant-design-vue时css报错 安装的ant-design-vue版本号必须是1.7.8 npm install ant-design-vue@1.7.8 然后再main.js中写入 import 'ant-design-vue/dist/antd.css'; import Antd from "ant-design-vue"; Vue.use(Antd) 重新启动项目即可 ...
Failed to resolve import “ant-design-vue/dist/antd.css“ from “src/main.ts“. Does the file exist?
最新发布
不定期分享学习心得，面试经历以及工作中的问题，感兴趣的兄弟们可以关注
06-17 243
踩坑实录： 严格遵循 Ant Design Vue 官方文档引入组件库，竟遭遇诡异报错！反复核对代码无误，问题根源竟是——官方推荐的 `antd.css` 引入方式有误！
vue3+vite+vant项目下按需引入vant报错Failed to resolve import解决方案
weixin_45765073的博客
01-20 8789
在vue3+vite+vant项目下按需引入vant报错Failed to resolve import解决方案
Vue3 + Vite + Ant design vue + Windi CSS
weixin_38705829的博客
03-07 1847
在本地搭建 Vue 单页应用。创建的项目将使用基于Vite的构建设置，并允许我们使用 Vue 的单文件组件(SFC)。Vite 官网：https://vitejs.cnVite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。这一指令将会安装并执行，它是 Vue 官方的项目脚手架工具。
vue3 + ant-design3(2.2.6+) + vite
hello，是翠花呀
08-22 785
上次体验了一下vue3+element-plus，总体感觉element-plus比element(vue2)好使且多一些功能。 这次体验一下vue3+ant-design2(vue3) 安装好之后按需引入 ant 组件 ant.congig.js: import "ant-design-vue/dist/antd.css"; import { Button, Menu, SubMenu, MenuItemGroup, Row, Col, Radio, RadioGro
vue3使用Vite打包报Rollup failed to resolve import “xxx/node_modules/ant-design-vue/xxxx
sxs7970的博客
12-02 1万+
vite打包报错 Rollup failed to resolve
Ant design - Module not found: Error: Can‘t resolve ‘ant-design-vue/dist/antd.css‘ in ‘ ‘
qq_20770569的博客
08-03 1176
报错：Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css' in 'xxx' 原因：引入的antd.css文件实际上应该是reset.css文件，是由于ant-design-vue的官网给的代码和实际下的包的文件不一致导致。
[vite] Internal server error: Failed to resolve import
LD77547231的博客
08-24 5682
这一步是在vite的项目的文件中， 配置按需引入插件报错启动项目报错。
关于vue3.0引入antdv在main.ts中报错
weixin_44844800的博客
02-25 3321
关于vue3.0引入antdv在main.ts中报错 1.根据官网（antd官网链接）提示 npm i --save ant-design-vue 安装 antdv 后在main.ts中引入（比较懒，为了省事，并没有按需加载） import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import Antd from 'ant
vue3使用import引入组件报Internal server error: Failed to resolve import “@/components/xxx“错误
hua_ban_yu的博客
04-15 1万+
使用vue3 + ts搭建项目，引入vue组件时报，[vite] Internal server error: Failed to resolve import "@/components/home/HomeSearch" from "src/views/HomeView.vue". Does the file exist?原因：直接引入vue组件但没有在vite.config.ts文件配置扩展。方案1、在vite.config.ts文件中添加扩展，保存后重新运行即可。引入组件添加.vue后缀，如图。
2024-05-21 Module not found: Error: Can‘t resolve ‘ant-design-vue/dist/antd.css‘ in ‘xxx‘ ==》运行项目报错，
m0_70556273的博客
10-21 388
使用vue2安装ant-design-vue报标题错误，安装低版本的即可，
vue3 +vite +antDesign 报错无法解析antd.css文件
jiangchenW的博客
07-31 1829
使用Ant Design of Vue 4.x版本开发时，报错无法解析antd样式文件。查看依赖文件发现并不存在antd.css文件.
Vue项目构建路由报错[plugin:vite:import-analysis] Failed to parse source for import analysis because the ...
热门推荐
scoutee的博客
05-11 1万+
报错如图： [plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files. 问题原因 缺少@vitejs/plugin-vue组件，需要重新安装。 问题解决 安装@vitejs/plugin-vue 重装npm 根目录
引入antd.css报错
weixin_42234899的博客
01-11 653
使用npm i --save ant-design-vue@next即可解决。我用的是vue3，但引入的antd是3.X，所以报这个错误。原因是找到antd的版本和vue的版本一致。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值