微信小程序Vant Weapp中的Toast导入失败解决办法

最新推荐文章于 2024-07-12 16:34:51 发布
最新推荐文章于 2024-07-12 16:34:51 发布
阅读量1.4k 收藏 3
点赞数 2
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43520670/article/details/115680019
版权

Vant Weapp中的Toast导入失败解决办法


我是按照官方文档 https://vant-contrib.gitee.io/vant-weapp/#/toast 的例子导入的

在json中加入，"van-toast": "@vant/weapp/toast/index"
在这里插入图片描述
然后在js中加入

import Toast from '../../node_modules/@vant/weapp/dist/toast/toast';

但是报错
在这里插入图片描述
但是node_modules/@vant/weapp/dist/toast/toast是存在的
在这里插入图片描述
在这里插入图片描述
所以就很奇怪，可能是因为node_modules里面的东西是没有加入到微信编译的模块，所以它找不到

所以解决办法就是，在js中import Toast from '../../node_modules/@vant/weapp/dist/toast/toast';改为import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast'问题就解决了

import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast'
//  import Toast from '../../node_modules/@vant/weapp/dist/toast/toast';

解决后：
在这里插入图片描述

Chasing stars
关注
专栏目录
微信小程序 - Vant Weapp UI 框架引入 Toast (轻提示)
王佳斌
08-02 9101
前言 官网介绍的不太清楚，这里记录一下。 第一步 在所在页面的 xx.json 文件中引入，注意路径： "usingComponents": { "van-toast": "@vant/weapp/toast/index" } 第二步 在所在页面中 xx.js 文件中引入，注意路径！ import Toast from '@vant/weapp/toast/toast'; 第三步 在所在页面中 xx.wxml 文件中放入以下组件，注意路径！ <van-toast id="van-toast
微信小程序使用vant的Toast: import Toast from ‘path/to/@vant/weapp/dist/toast/toast‘； 报错
InterestAndFun的博客
02-22 861
问题描述 记录一下使用vant官方文档出现的一个坑，暂且不知道是不是由于版本的问题，在导入toast提示框的时候，发现无法导入这个对象 查明原因 首先第一个考虑的就是前面的 path/to 是不是有问题，机智的我马上将它改成了 ../../miniprogram_npm/@vant/weapp/dist/toast/toast 但还是出现了问题 这没办法了，只能按包去查找，是不是真的有这个文件，或者目录出现了错误 果然，根本就没有dist这个目录！！在下面能找到toast这个目录，那问题就已经解决了
微信小程序+vant 实现toast弹窗（解决路径报错问题）
dmyc1027的博客
06-11 2793
微信小程序实现制作toast弹窗，利用vant组件库。 vant官网路径出现报错：Error: module "pages/buyGood/path/to/@vant/weapp/dist/toast/toast.js" is not defined，修改导入路径以解决。
如何解读vant-weapp文档中的toast功能
最新发布
克里斯蒂亚诺更新的博客
07-12 146
点击toast：
微信小程序开发引用vant中的Toast失败
qq_51632935的博客
08-08 2141
微信小程序开发引用vant中的Toast失败，可以使用其他方法来实现。
小程序中引入vant-weapp toast组件踩坑 ( toast 不显示)
Codernmx
08-08 1932
引入方法 import Toast from '../../vant-weapp/toast/toast'; 文件结构: 直接按照官方的引入的话可能存在路径问题. 官方: 还需要注意的就是要在wxml中写上:<van-toast id="van-toast" />不然也不会有弹窗. <van-toast id="van-toast" /> ...
微信小程序如何使用Vant Weapp组件中的Toast组件
weixin_53944118的博客
03-16 891
第一步、在app.json或index.json中引入组件 "usingComponents": { "van-toast": "@vant/weapp/toast/index" } 第二步、在index.wxml文件中写入： <van-toast id="van-toast" /> 第三步、在index.js中引入官方的路径 import Toast from 'path/to/@vant/weapp/dist/toast/toast'; 但是引入之后回报路径错误，如图 那如何解决呢
微信小程序之 vant-weapp使用Toast 遇到的问题
shane的博客
10-23 1284
官方给的路径是这样 import Toast from 'path/to/@vant/weapp/dist/toast/toast'; 引入后发现报错。。。。。。 正常的路径应该为 importToastfrom'@vant/weapp/toast/toast'; 修改完成后 便可使用啦！
微信小程序使用Vant Weapp的Toast 遇到的问题
weixin_53944118的博客
03-16 309
官方给的路径是这样 import Toast from 'path/to/@vant/weapp/dist/toast/toast'; 引入之后发现抱错 正常的路径为： import Toast from '@vant/weapp/toast/toast'; 修改完之后就可以了
微信小程序vant weapp源码
05-02
vant weapp是一个基于微信小程序的组件库，旨在为开发者提供高质量、易用的UI组件，包括常见的表单、列表、弹窗、导航等组件。该组件库源码开放，提供给开发者自由参考、学习和使用。 vant weapp的源码包括两个部分...
Vue+elementui和uniapp小程序+vant weapp
ds0604的博客
02-10 6398
uniapp+vant weapp搭建项目从零开始；vue+elementui搭建项目从零开始
微信小程序引用vant toast 提示 “未找到 van-toast 节点“
u013986655的博客
07-05 1995
微信小程序引用vant 的toast 出现如下报错 都是因为没有正确引入toast 组件 正确引入toast 组件需要在三个文件中设置 在 .wxml 文件的 view 内写入 <van-toast id="van-toast" />， 在 .json 文件的 usingComponents 内写入 "van-toast": "@vant/weapp/toast/index" 在 .js 文件的顶部写入 import Toast from '@vant/weapp/toast/toast'
vant组件库中Toast组件文本无法实现全在一行,怎么设置在两行显示而且居中
fury的博客
12-09 857
分享成功<br>获得1次抽奖机会
解决微信小程序引入VantWeapp的toast报错
lllcuigu的博客
02-04 627
Error: module 'pages/maintain/@vant/weapp/toast/toast.js' is not defined, require args is '@vant/weapp/toast/toast' （路径问题）
【微信小程序】使用vant引入toast組件找不到toast.js文件和未找到 van-dialog 节点的解决办法--学习微信小程序之路04
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-03 1562
解決流程 1.问题引入代码 import Toast from '/miniprogram_npm/@vant/weapp/toast/toast'; 改为： import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast'; 2.使用时，如果爆出toast节点找不到。解决办法 view视图: <van-toast id="van-toast" /> json文件 { "usingComponents": { "
小程序使用vant toast 报错
Bald_ness的博客
10-09 253
今天用小程序的时候需要用到vant toast组件报错 官方给的路径是这样 import Toast from 'path/to/@vant/weapp/dist/toast/toast'; 引入后发现报错。。。。。。 正常的路径应该为 import Toast from '@vant/weapp/toast/toast'; 修改完成后 便可使用啦！ ...
vantweapp的toast组件
weixin_43945122的博客
04-13 232
1 json文件引入 "usingComponents": { "van-toast": "/miniprogram_npm/@vant/weapp/toast" }, 2 xx.xml文件引入 <van-toast id="van-toast" /> 3 xx.js文件引入组件 import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast'; 4 使用组件 onLoad: function (options
Vant Weapp小程序蹲坑之使用toast组件
qq_34322008的博客
05-10 4142
问题 使用Mpvue框架结合Vant Weapp组件库进行微信小程序开发中使用toast组件时，不小心又陷入“坑”中，当然主要还是路径问题。 注意点 使用toast组件时，与其它最普通的Vant Weapp组件相比，有几点需要注意。为了更方便理解，还是先上源码（index.vue），如下： x <van-picker :columns=“column4”...
vantweapp的toast组件使用
qq_37655448的博客
10-03 2591
1,json文件引入 "usingComponents": { "van-toast": "/miniprogram_npm/@vant/weapp/toast" }, 组件 2,xx.xml文件引入 <van-toast id="van-toast" /> 3，xx.js文件引入组件 import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast'; 4，使用组件 onLoad: func..
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值