本文主要是介绍微信小程序开发，引用Vant Weapp UI样式，报错“没有找到可以构建的 NPM 包……”，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 1.安装 Vant Weapp 的步骤
- 2.常见问题
1.安装 Vant Weapp 的步骤
- npm 安装 Vant Weapp
- 修改 app.json
- 构建 npm 包
- 引入组件
- 验证
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.常见问题
- 使用构建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/"}]
}
- Vant Weapp 引入以后还是不能使用
原因：可能是项目还没有编译好，可以关闭开发工具，然后重启即可。
这篇关于微信小程序开发，引用Vant Weapp UI样式，报错“没有找到可以构建的 NPM 包……”的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
