背景介绍:在一个月之前新建了一个微信小程序项目,新建一个项目参照了 微信小程序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,所以才有这个目录,大家如果没有这个,可以建两个项目,一个构建一下把上面这个目录复制出来,就这样。我也没想到其他更好的方法。)