微信小程序npm如何引用Vant Weapp-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44537838/article/details/104362337

本文介绍了在微信小程序中通过NPM安装和引用Vant Weapp插件的步骤，包括如何构建npm模块，解决"没有找到可以构建的NPM包"的问题。在遇到问题时，提供了两种解决方案，涉及在小程序根目录使用CMD执行相关命令，以及处理app.json中组件引用的注意事项，避免找不到组件的报错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：没有找到可以构建的NPM包

没有找到可以构建的NPM包

一、NPM安装插件

在小程序的根目录执行：

npm i vant-weapp -S --production

二、打开微信开发者工具，点击工具 -> 构建 npm，并勾选使用 npm 模块选项，构建完成后，即可引入组件

在这里插入图片描述

构建完成后目录会多出miniprogram_npm文件

如果不行，请看下面

在小程序的根目录使用cmd（管理员）执行

方案一

将以下命令全部执行一遍

npm init
npm install --production
npm install --save miniprogram-recycle-view

方案二

使用cmd进入项目根目录后执行

npm init

然后回车回车回车……再执行安装vant插件指令即可

npm i @vant/weapp -S --production

注意：引入页面的app.json所需要使用的组件，不引用有可能导致报错

在这里插入图片描述

报错：大致意思找不到组件

在这里插入图片描述

方案一

以管理员身份使用cmd将以下命令全部执行一遍

npm init
npm install --production
npm install --save miniprogram-recycle-view

移除包

npm uninstall miniprogram-recycle-view

方案二

你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除，
之后再https://github.com/youzan/vant-weapp下载一份vant， 将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到项目的miniprogram_npm/vant-weapp
原文：https://www.jb51.net/article/166771.htm