微信小程序打开项目报错: @vant/weapp/nav-bar/index/index 路径下未找到组件, package.json 对应的 node_modules 不存在

今天，下载来一个小程序源码，使用 [微信开发者工具] 打开后，出现如下画面：

[ app.json 文件内容错误] app.json: ["usingComponents"]["van-nav-bar"]: "@vant/weapp/nav-bar/index"，在 D:\xxx\source_code\xq_front_minipro/@vant/weapp/nav-bar/index
D:\xxx\source_code\xq_front_minipro/@vant/weapp/nav-bar/index/index
D:\xxx\source_code\xq_front_minipro/miniprogram_npm/@vant/weapp/nav-bar/index
D:\xxx\source_code\xq_front_minipro/miniprogram_npm/@vant/weapp/nav-bar/index/index
D:\xxx\source_code\xq_front_minipro/miniprogram_npm/@vant/weapp/nav-bar/index
D:\xxx\source_code\xq_front_minipro/miniprogram_npm/@vant/weapp/nav-bar/index/index 路径下未找到组件(env: Windows,mp,1.06.2310080; lib: 3.2.1)

出现上述原因是，组件库没有正确安装或者安装位置不正确。

解决方法：

以管理员身份打开终端，在该项目目录执行命令

npm install

然后打开微信开发者工具，点击左上角工具，在工具里面找到构建npm

正常情况下，这就好了。

---

如果一切正常，就不必再往下看了。
可是，我这里执行npm 命令时，是这样的：

这说明本机没有npm命令。
通常情况下，我们安装node.js后，就会有npm命令。我们看下是否安装了二者，果然：都没有安装。

接下来安装node.js
下载地址：https://nodejs.org/en/
一路下载安装即可，详细内容见 node.js 安装手册。
安装完成后，退出之前的dos窗口，再重新进入，发现可以了：

我再去执行 微信开发者工具 中的 工具 菜单下的 构建npm 按钮，得到如下提示：

message：发生错误
Error: D:\xxx\source_code\xq_front_minipro\package.json 对应的 node_modules 不存在，请在 D:\xxx\source_code\xq_front_minipro 执行 `npm install`
appid: wx614a46cc176a5774
openid: o6zAJs8NBBG-3G-A3sPCKk3ehDrQ
ideVersion: 1.06.2310080
osType: win32-x64
time: 2024-07-08 05:07:20

我们按照提示，去文件夹下执行 npm install

然后再去 构建npm，结果如下，就可以了。

以上就是 微信小程序打开项目 报错解决方法的全部内容，感谢阅读。