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

电玩女神 2022-11-19 01:13 566阅读 0赞

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

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

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

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

但是报错  
![在这里插入图片描述][2021041321485395.png]  
但是`node_modules/@vant/weapp/dist/toast/toast`是存在的  
![在这里插入图片描述][20210413215012408.png]  
![在这里插入图片描述][20210413215056610.png]  
所以就很奇怪，可能是因为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';

解决后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: /images/20221022/1d0d6e74f2ce44aa97adaa9283d15264.png
[2021041321485395.png]: /images/20221022/848152006c7d4304881d45c4eb0ce67a.png
[20210413215012408.png]: /images/20221022/64cf35b9515d40c480cec777d4611192.png
[20210413215056610.png]: /images/20221022/3290f2e2fc704989859f731f44f09dbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]: /images/20221022/2f2680bcc0aa46f6867e249bc2984bc7.png