微信小程序开发，引用Vant Weapp UI样式，报错“没有找到可以构建的 NPM 包……”

本文主要是介绍微信小程序开发，引用Vant Weapp UI样式，报错“没有找到可以构建的 NPM 包……”，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.安装 Vant Weapp 的步骤

1. npm 安装 Vant Weapp
2. 修改 app.json
3. 构建 npm 包
4. 引入组件
5. 验证

npm 安装 Vant Weapp

npm i @vant/weapp -S --production

修改 app.json

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

构建 npm 包，点击 工具 -> 构建 npm

找到project.config.json文件配置packNpmManually和packNpmRelationList

{"setting": {……},"userConfirmedBundleSwitch": false,"packNpmManually": true,     // 手动打包 npm 包"packNpmRelationList": [      // npm 包需要手动打包以及它们的依赖关系{"packageJsonPath": "./package.json",  "miniprogramNpmDistDir": "./miniprogram/"}],}
}

引入组件

// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

验证

<van-button type="primary">按钮</van-button>

2.常见问题

1. 使用构建npm时，报错没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 miniprogramRoot 目录内，或配置 project.config.json 的 packNpmManually 和 packNpmRelationList 进行构建 [1.06.2402040][darwin-x64]

原因：执行构建的时候在根目录下没有找到文件，因为原则上小程序需要package.json和app.json在同一个目录下的，由于项目中并没有在同一个目录结构下，因此npm构建失败了，只要改 packNpmManually 和 packNpmRelationList 的地址就好。

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

2. Vant Weapp 引入以后还是不能使用
   原因：可能是项目还没有编译好，可以关闭开发工具，然后重启即可。

这篇关于微信小程序开发，引用Vant Weapp UI样式，报错“没有找到可以构建的 NPM 包……”的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---