微信小程序集成vant-weapp时,构建npm报错的解决办法

Vant 是一个轻量、可靠的移动端组件库,目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本

在微信开放平台安装Vant时,按照官方提供的教程:https://vant-ui.github.io/vant-weapp/#/quickstart,安装时会报错,报错信息如下:

message： NPM packages not found. Please confirm npm packages which

need to build are belong to miniprogramRoot directory. Or you may

edit project.config.json's packNpmManually and packNpmRelationList

appid: wx2230629e5b7568a0 openid: o6zAJs4hyC79s2JnbJgjeqABmVY8

ideVersion: 1.06.2504020 osType: win32-x64 time: 2025-08-21 19:16:00

官方提供的安装步骤中,第一步是通过npm安装

在这里插入代码片# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

问题就出在这里,由于项目中还没有package.json文件,所以导致后续构建工具时会报错.正确的安装步骤为:

1 项目根目录，打开终端【在内建终端打开】

-npm init -y  # 会生成package.json文件

2 安装vant（可以使用cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org）

npm i @vant/weapp -S  # package.json 能看到下载完成，项目目录下有node_modules

3 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱

4 project.config.json 的settings中加入

"packNpmManually": true,
"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./"
  }
]

5 构建 工具---》构建npm,构建成功