微信小程序使用vant组件报错

背景介绍：在一个月之前新建了一个微信小程序项目，新建一个项目参照了 微信小程序npm支持的步骤，构建了npm,官网地址如下：

npm 支持 | 微信开放文档

之后分别在两台电脑上跑过，之前预览开发版代码是在A电脑，手机扫描二维码之后可以正常使用，然后昨天在B电脑上改了东西，预览开发版手机扫描二维码之后一堆报错。报错如下：

Component is not found in path "miniprogram_npm/@vant/weapp/loading/index" (using by "custom-tab-bar/index")
Component is not found in path "miniprogram_npm/@vant/weapp/action-sheet/index" (using by "custom-tab-bar/index")

解决方式：

根据微信小程序官方npm包发布流程，使用npm pulish 到npm镜像之后，还是会报错。

​​​​​​​

 最终只能不使用npm将组件信息本地静态引入，新建了一个工作空间，将原微信小程序原有的目录层级进行复制，目录层级如下：

在components 下新建一个目录 vant（这个名称大家可以按照自己实际引入的组件起名字，随意）用来放vant组件，这里一定要在components 目录下面，一定一定。否则还是会报错。

然后vant目录下面的文件就直接用了 npm构建出来的miniprogram_npm\@vant\weapp目录，在网上查了很多，很多人说使用vant源代码的dist目录复制就可以用如下图，

 

但是我用的时候会报错找不到路径。原因是微信小程序打包没上传.d.ts文件。 

最终我就把构建出来的miniprogram_npm\@vant\weapp 下拷贝随便试试，没想到好了 。不报错了。意外惊喜呀！！

 总结：

1.不要使用npm新建项目，构建项目。

2.在components 下新建一个目录 vant用来放vant组件，这里一定要在vant目录下面，一定一定。否则还是会报错。

 3.vant目录下放置的是构建出来的miniprogram_npm\@vant\weapp（由于我是一开始踩坑就构建了npm,所以才有这个目录，大家如果没有这个，可以建两个项目，一个构建一下把上面这个目录复制出来，就这样。我也没想到其他更好的方法。）