在vue3+vite项目下按需引入vant报错Failed to resolve import解决方案

最新推荐文章于 2024-09-19 10:15:06 发布
最新推荐文章于 2024-09-19 10:15:06 发布
阅读量2.6w 收藏 32
点赞数 35
分类专栏： vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42099193/article/details/123376127
版权

在vue3+vite项目下按需引入vant报错Failed to resolve import解决方案

问题描述

近日尝试使用vite+vue3+vant开发项目过程中，参考vant官网开发指南->快速上手->引入组件
在这里插入图片描述

按照上述配置好后，运行vite环境报错：Failed to resolve import
在这里插入图片描述

原因分析

根据报错信息，发现是vant的样式引入路径不对。
程序解析为：项目路径/node_modules/vant/lib/vant/es/组件/style
实际应该是：项目路径/node_modules/vant/lib/ vant/es/组件/style
多了一个vant/lib路径。

解决方案

在vite.config.js文件中解析至正确路径。
vant官网的代码如下：

最低0.47元/天 解锁文章
肖南飞
关注
专栏目录
Vue3 - Vite 解决报错 [plugin:vite:vue] [@vue/compiler-sfc] Missing semicolon. vue3+vite 在运行或打包时出现报错详细解决！
王佳斌
09-06 2872
vue3，vite，报错，提示错误，控制台错误，vue3报错Missing semicolon，如何解决这个问题，vite vue3项目运行报错，缺少分号；缺少操作符或分号，vue3+vite提示Missing semicolon.，vue3打包，编译打包报错，启动报错，无法启动，打包失败，vite打包发布时出现错误，npm run build，plugin:vite:vue，@vue/compiler-sfc，Vue3使用vite打包时出现 Missing semicolon 问题，没有额外的分号怎么排查
Internal server error原因分析
liutao2016的博客
11-14 9717
错误描述： 使用apache环境开发时，时不时会遇到"internal server error500"，按照翻译，应该是服务器内部错误，难道apache出错了，Apache破损了，答案显然不是这样的，实际上，就是apache无法正常解析文件，所以就抛出这个错误。 原因分析： 产生这个错误的原因一般就是3点： 第一，权限配置问题，文件没有权限进行读取，就会抛出这个错误，这个原因在linux
Failed to resolve import “@/views/index.vue“ vue3 路由配置@找不到文件
且听风吟的博客
04-13 1万+
使用 vite 搭建一个 vue3 的一个typescript的项目。 配置路由的添加路由界面的时候，报错：找不到指定的文件
Vue新建项目运行空白,报错[vite]Pre-transform error: Failed to load url /src/main.js (resolved id: /src/main.js)
最新发布
qq_56727664的博客
09-19 1027
Vue新建项目运行界面空白，终端报错为 [vite] Pre-transform error: Failed to load url /src/main.js (resolved id: /src/main.js). Does the file exist?
[vite] Internal server error: Failed to resolve import
LD77547231的博客
08-24 2030
这一步是在vite的项目的文件中， 配置按需引入插件报错启动项目报错。
vue3+vite+vant项目下按需引入vant报错Failed to resolve import解决方案
weixin_45765073的博客
01-20 7897
在vue3+vite+vant项目下按需引入vant报错Failed to resolve import解决方案
Vue3 + vite 按需引入vant报错 Failed to resolve import “vant/es“ from “xxx“. Does the file exist?
wuyxinu的博客
10-13 3786
学习 vue3 + vite 的时候，做一个demo项目，其中用到了vant。按照vant官网按需引入组件的时候。在vite配置中，自己配置了extensions时，没有配置 .mjs，导致找不到文件。vant的入口文件是 .mjs 后缀的，痛苦面具。
使用 Vite-plugin-style-import 报错：Failed to resolve import（已解决）
热门推荐
weixin_54682148的博客
06-11 1万+
在 Vue3+Vite+Vant 项目中配置自动按需引入插件 vite-plugin-style-import 报错：Failed to resolve import 解决方案
【报错】Failed to resolve import “@/..“ from “src/...“ @找不到路径
owo_ovo的博客
11-24 1万+
Failed to resolve import “@/.." from "src/..." @找不到路径
Failed to resolve import “element-plus/es/el-sub-menu“ from “src\components\
茹嗨瑞的博客
11-01 8563
Failed to resolve import "element-plus/es/el-sub-menu" from "src\components\
vite构建项目按需引入vant时vite-plugin-style-import 报错 require.resolve is not a function
bsefef的博客
03-09 728
最近开始使用vite去替代了传统的脚手架vue- cli ，为什么好好的脚手架不用，开始追求了vite，时过境迁，我们见证了诸如webpack、Rollup和Parcel等工具的变迁，它们极大地改善了前端开发者的开发体验。在将来 一定是vue3 + vite + ts时代。 下面说一下用vite简单构建项引入vant一些流程 和 报错解决 1.搭建vite项目 使用npm npm init vite@latest 使用 Yarn yarn create vite 使用 PNPM pnpm create
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 2388
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
vue3+vite3+vant搭建移动端简易模版
发果叁
09-30 4045
vue3.x相关的生态已经在不断的完善中，相应的UI/路由/pinia等都已成熟，新的项目也在考虑使用新版本开发了，开一个帖子记录一下搭建移动端简易模版的过程，方便以后回顾。
Vue3 + Vite+ Element-Plus + TypeScript 搭建系统
weixin_45044818的博客
12-04 1497
一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。创建 variables.scss 变量文件，注意规范变量以 $ 开头 @styles/variables.scss。上面导出的scss全局变量在ts不生效的，需要创建一个以.module.scss 结尾的文件。添加scss @styles/normalize.scss。vite导入variables.scss。
vue3+vite简单打包配置
木玄客的博客
11-21 2077
vue+vite3打包配置
Failed to resolve import “element-plus/es/components/anchor/style/css“ from “xxx/“
qq_42171964的博客
05-11 1541
在node/_modules/element-plus/es/components/文件路径下没有找到anchor文件夹，说明当前版本没有anchor。查看了官网anchor是2.6.0版本添加的，项目版本是2.5.3，需要修改版本重新安装依赖。“element-plus”: “2.6.0”, 重新npm i 安装依赖。
Failed to resolve import “@/views/index.vue“ from “src\router\index.ts“ vue3 路由配置@找不到文件
m0_62811051的博客
11-07 1万+
Internal server error: Failed to resolve import "@/views/LoginView.vue" from "src\router\index.ts". Does the file exist?
Vue编译报错 “Failed to resolve import “@/router“ from “src\main.js“. Does the file exist ? “ 问题修复
valsedefleurs的博客
06-26 3891
Vite构建工具解析别名resolve.alias配置
vue3+vant按需引入报错，Failed to resolve import “E:/code/baidu/node_mod在这里插入代码片ules/vant/lib/vant/es/nav-ba
m0_44974944的博客
06-07 3497
vue3+vant按需引入报错，Failed to resolve import "E:/code/baidu/node_mod在这里插入代码片ules/vant/lib/vant/es/nav-bar/style" from "src\main.js".
vue3+vite+ts如何按需引入Ant Design
04-13
可以使用 babel-plugin-import 插件来按需引入 Ant Design。具体步骤如下： 1. 安装 babel-plugin-import 插件： ```shell npm install babel-plugin-import -D ``` 2. 在 babel.config.js 中配置插件： ```javascript module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true, }, ], ], }; ``` 其中 libraryName 表示需要按需引入的库名，libraryDirectory 表示库的入口文件在 node_modules 中的路径，style 表示是否需要引入样式文件。 3. 在需要使用组件的地方按需引入： ```javascript import { Button } from "ant-design-vue"; ``` 这样就可以按需引入 Ant Design 中的组件了。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值