下面模拟小白引入vant所遇到的问题与[ app.json 文件内容错误] ["van-button"]: "@vant/weapp/button/index" 未找到
1，利用npm引入vant组件，在目录下初始化组件库
命令：npm init
按ENTER键直到最后回yes好了
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-1.png)
2，npm i vant-weapp -S --production
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-2.png)
3，回到小程序构建npm
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-3.png)
4，此时可能会出现这样的一个问题说没有找到可构建的npm的包
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-4.png)
5，你回到miniprogram文件夹打开输入cmd
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-5.png)
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-6.png)
6，重复npm init
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-7.png)
7，npm i miniprogram-sm-crypto --production
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-8.png)
8，回到小程序就可以构建npm成功![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-9.png)
9，你要是和我一样是这个版本的话就不用找使用npm模块了，因为现在是没有使用npm模块的，现在很方便构建了npm就可以直接使用
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-10.png)
10，现在出现了这个![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-11.png)
11，那是因为上面2，7那个命令错了应该是这个
npm i @vant/weapp -S --production
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-12.png)
12，再回去构建npm就行了![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-13.png)
13，可以在app.json里面写这样就不会出错了，也不会组件找不到
![微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到](https://imgs.yssmx.com/Uploads/2023/06/503116-14.png)
总结：
命令的使用
1，到miniprogram文件夹打开输入cmd
2，npm init
3， npm i @vant/weapp -S --production
4，构建npm可直接使用（小程序新版本没有了使用npm模块了，直接构建npm就可直接用）
文章来源地址https://www.toymoban.com/news/detail-503116.html
文章来源：https://www.toymoban.com/news/detail-503116.html
到了这里，关于微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![【微信小程序导入项目报错：[app.json文件内容错误]app.json未找到】解决方法](https://imgs.yssmx.com/Uploads/2024/02/501760-1.png)
![解决微信小程序报[ app.json 文件内容错误] app.json: app.json 未找到，未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译](https://imgs.yssmx.com/Uploads/2024/02/529573-1.png)
![解决运行在微信小程序中报[ app.json 文件内容错误] app.json: app.json 未找到(env: Windows,mp,1.05.2204](https://imgs.yssmx.com/Uploads/2024/02/735464-1.png)
![hbuilderX运行到微信小程序报错[ app.json 文件内容错误] app.json: 未找到 [“sitemapLocation“] 对应的 sitemap.json文件](https://imgs.yssmx.com/Uploads/2024/04/850207-1.png)
![uniapp使用微信开发工具打开微信小程序运行[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json](https://imgs.yssmx.com/Uploads/2024/02/731233-1.png)
![微信小程序[ app.json 文件内容错误] app.json: app.json 未找到(env: Windows,mp,1.05.2204250； lib: 2.26.0)](https://imgs.yssmx.com/Uploads/2024/02/509116-1.png)
![【微信小程序】【微信开发者工具】[ app.json 文件内容错误] app.json: [“tabBar“][“list“][1][“iconPath“]: “xxx/yyy.png“ 未找到](https://imgs.yssmx.com/Uploads/2024/02/504566-1.png)
![【Uni-App】微信小程序编译每次都出现[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string](https://imgs.yssmx.com/Uploads/2024/02/832239-1.png)
