JSON文件[“USINGCOMPONENTS“][“VAN-BUTTON“] 未找到

最新推荐文章于 2023-07-21 21:00:22 发布
最新推荐文章于 2023-07-21 21:00:22 发布
阅读量3.9k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 小程序 npm vue
原文链接：https://blog.youkuaiyun.com/Fine_Cui/article/details/107395182
博客主要围绕小程序开发中出现的问题展开。当出现.json文件里'usingComponents'中'van-button'未找到的错误信息时，可右击在外部命令行打开，按提示回车确定，再执行相关操作，最后点击菜单栏工具构建npm，还需重新定义路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

错误信息

.json: [“usingComponents”][“van-button”] 未找到
或者
.json: [“usingComponents”][“van-button”]: “path/to/vant-weapp/dist/button/index” 未找到

解决

右击在外部命令行打开

执行

npm init

一路回车确定

npm install --production

然后执行

npm i vant-weapp -S --production -verbose

点击菜单栏–》工具 --》构建npm,下图是项目的本地设置

重新定义路径



小程序 自定义组件报错[“usingComponents“][“my-list“] 未找到
Start2019
07-01 7901
根据官网案例写了一个自定义组件，引入时总是报这个错误。 后面在社区里面找到了解决办法，把上面配置中改成："my-list": "/components/my-list/my-list"就可以了。 具体原因：官方文档上的自定义组件是 4 个文件全部都在 components 文件夹下，所以他们只需要 /components/my-list 就可以了。而我们实际开发需要多个组件，在 components 下会多新建一个文件夹，如果依旧 /components/my-list 这么写，此时找到的只是...
使用Vant 组件 [“usingcomponents“][“van-button“]: “@vant/weapp/button/index“ 未找到：
fghfghhgjgj的博客
01-14 1万+
这个问题困扰了我很久。 “未找到”，其实就是路径不对。 总结一下使用vant weapp的步骤。 第一步：在node中文网，下载并安装Node。 将node加入环境变量。 第二步：检查node是否安装成功。 win+R，cmd，输入命令：node -v，或者npm -v，只要显示版本号就可以了。 第三步：新建一个小程序。名字不要用中文的。 在小程序根目录，打开命令行窗口。 输入命令： npm init -y //-y的意思是，一直按 yes ,就是enter键。 npm i @vant/weapp -S
微信小程序json: [“usingComponents“][“van-button“] 未找到
qq_41562031的博客
11-27 7039
历经三小时，把全网方法用便才构建成功。 按着我的流程来 1、cmd进入文件下面，切记是文件，不是miniProgram，是根目录下 2、npm init初始化，初始化完成之后，小程序项目中就会出现package.json文件，说明已经初始化成功 3、npm install --production 安装生产环境，不要npm install都给装上，以免小程序包过大 4、安装vant ：npm i vant-weapp -S --production 5、打开微信开发者工具，工具栏中选择构建 npm 6、软件
[“usingComponents“][“van-button“]: “@vant/weapp/dist/button/index“ 未找到(env: Windows,mp,1.06.230
qq_46506007的博客
03-20 3836
["usingComponents"]["van-button"]: "@vant/weapp/dist/button/index" 未找到(env: Windows,mp,1.06.230 报错，和新手创建ts项目 引入vant
*.json: [“usingComponents“][“van-button“] 未找到
热门推荐
Java Pro
07-16 19万+
错误信息 .json: [“usingComponents”][“van-button”] 未找到 或者 .json: [“usingComponents”][“van-button”]: “path/to/vant-weapp/dist/button/index” 未找到 解决 右击在外部命令行打开 执行 npm init 一路回车确定 npm install --production 然后执行 npm i vant-weapp -S --production -verbose 点击菜单栏–》工具
【微信小程序】[ app.json 文件内容错误] app.json: [“usingComponents“][“van-button“]: “@vant/weapp/button/index“ 未找
TIG_JS的博客
04-11 5981
解决[ app.json 文件内容错误] app.json: ["usingComponents"]["van-button"]: "@vant/weapp/button/index" 未找
微信小程序bug:没有找到可以构建的NPM包，请确认需要参与构建的npm在miniprogramroot目录；与app.json: [“usingComponents“][“van-button“]:
qq_52683382的博客
07-21 2396
app.json: ["usingComponents"]["van-button"]: "@vant/weapp/button/index" 未找到
微信小程序报错[ app.json 文件内容错误] app.json: [“usingComponents“][“van-button“]: “@vant/weapp/lib/button/index
weixin_40832299的博客
05-25 8858
[ app.json 文件内容错误] app.json: ["usingComponents"]["van-button"]:
关于Vant Weapp中组件引入未找到的解决方案
佐斌的笔记簿
07-06 2万+
在开发微信小程序时，需要引入一些第三方UI库，这时就需要用到微信小程序的 UI，分享一些遇到的问题 Vant Weapp框架引入组件失败问题: 使用Vant 组件 [“usingcomponents”][“van-button”]: “@vant/weapp/button/index” 未找到： 当出现: vm192:2 miniproject/app.json: ["usingcomponents"]["van-button"]: "@vant/weapp/button/index" 未找到 解决方案
小程序通过页面json文件中的usingComponents引入组件的方式实现自定义tabbar，会闪烁，影响小.zip
07-27
自定义tabbar，通过页面json文件中的usingComponents引入组件的方式实现，tab页面第一次加载时会出现闪烁现象，但相对于全局json中设置custom为true方式有所改善。
使用Vant按需加载UI的时候报错：Unknown custom element 解决方案
qq_39740660的博客
10-17 1万+
使用Vant去按需加载UI的时候报错： vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <van-button> - did you register the component correctly? - For recursive components, make sure to provide ...
uniapp运行到微信程序报错[ pages/**/index.json 文件内容错误] [“usingComponents“][“**“]未找到
lingliu0824的博客
03-24 2万+
在这里插入图片描述
解决[“usingcomponents“][“van-button“]: “@vant/weapp/button/index“ 未找到：
AEI的博客
06-30 8923
解决步骤： 命令行cd转到miniprogram目录(注意使用下面的命令行要在工程目录下cd) cd .\miniprogram\ 在这里生成package.json npm init -y 在这个目录下安装vant npm i @vant/weapp -S --production 由于我们是在miniprogram目录下安装的，所以就不用修改project.config.json了 保持默认就好： { ... "setting": { ... "packNpmM
关于微信小程序如何使用Vant组件
香梨炒虾米的博客
03-31 5227
微信小程序如何使用Vant组件前言一、微信小程序自动查找第二种 前言 今天闲着没事，兴趣来了，想写写微信小程序，用原生的敲，因为懒得原因，不想再去封装一些组件库，就想当Vant，引用Vant真的是一波三折，不用不知道，一用才知道，好了，废话说的差不多了 一、微信小程序自动查找 Vant官网说的其实也挺清楚的， 第一步：npm i @vant/weapp -S --production 第二步：将 app.json 中的 “style”: “v2” 去除， 第三步：修改 project.config.js
微信小程序使用Vant组件，出现 Component is not found in path 错误
竹映平昔
10-21 1万+
错误截屏 解决办法 进入到vant-weapp目录下，将里面的组件全部删除 然后打开 vant的官方git仓库 ：https://github.com/youzan/vant-weapp 将其全部下载下来，再将里面的dis目录代码放入vant-weapp中即可将问题解决！ 成功解决 ...
5. 使用 Vant 组件 在页面 json 文件中配置：{ "usingComponents": { "van-button": "@vant/weapp/button/index", "van-field": "@vant/weapp/field/index", "van-form": "@vant/weapp/form/index" } } 在 wxml 文件中使用：<van-form bind:submit="onSubmit"> <van-field name="username" label="用户名" placeholder="请输入用户名" /> <van-button type="primary" block>提交</van-button> </van-form> 请告知我具体文件路径
最新发布
06-29
<think>我们需要明确Vant Weapp组件在使用npm安装后的具体路径。根据之前的说明，通过npm安装vant-weapp后，在构建npm之后，会在项目根目录下生成`miniprogram_npm`目录（或者根据project.config.json中配置的目录）。通常，在`miniprogram_npm`目录下会有`@vant`文件夹，里面是`weapp`，然后每个组件都在自己的目录下，如`button`、`field`等。因此，在页面json中配置组件的路径应该是："van-button":"@vant/weapp/button/index"这里的`@vant/weapp`指向的是`miniprogram_npm/@vant/weapp`目录，而`button/index`就是按钮组件的入口。所以，文件路径应该是：miniprogram_npm/└── @vant/└── weapp/├── button/│├──index.js│├── index.json│├── index.wxml│└── index.wxss├── field/│└── ...(同上)└──form/└── ...(同上)在页面json中配置的路径就是相对于`miniprogram_npm`目录的路径，因为微信小程序在构建npm后会将npm包放在`miniprogram_npm`下，并且支持使用npm包名（如`@vant/weapp`）来引用。但是，请注意：在project.config.json中我们配置了`miniprogramNpmDistDir`为`./`，即项目根目录，所以构建后的npm包会放在项目根目录下的`miniprogram_npm`文件夹中。如果构建后没有生成`miniprogram_npm`目录，请检查：1.是否执行了构建npm（在微信开发者工具中：工具 ->构建npm）2.project.config.json中的配置是否正确，特别是`packNpmManually`和`packNpmRelationList`另外，在wxml中使用组件时，直接按照配置的组件名使用即可，如`<van-button>`。下面是一个完整的示例，展示如何配置和使用VantWeapp组件。</think># Vant Weapp 组件在微信小程序中的文件路径详解 在使用 Vant Weapp 组件时，正确配置文件路径至关重要。下面我将详细解释具体的文件路径配置，并提供完整的项目结构示例。 ## 项目目录结构 在微信小程序中使用 Vant Weapp 组件时，典型的项目结构如下： ``` my-miniprogram/ ├── miniprogram_npm/ # npm 构建后生成的目录 │ └── @vant/ │ └── weapp/ # Vant 组件库 │ ├── button/ │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── field/ │ │ └── ... # 同上结构 │ └── form/ │ └── ... # 同上结构 │ ├── pages/ # 小程序页面目录 │ └── index/ # 首页目录 │ ├── index.js # 页面逻辑 │ ├── index.json # 页面配置 │ ├── index.wxml # 页面结构 │ └── index.wxss # 页面样式 │ ├── app.js # 小程序入口文件 ├── app.json # 全局配置 ├── app.wxss # 全局样式 ├── project.config.json # 项目配置文件 └── package.json # npm 依赖配置 ``` ## 关键路径详解 ### 1. Vant 组件路径 在 `usingComponents` 中配置的路径是基于 `miniprogram_npm` 目录的相对路径： ```json { "usingComponents": { "van-button": "@vant/weapp/button/index", "van-field": "@vant/weapp/field/index", "van-form": "@vant/weapp/form/index" } } ``` **实际文件路径对应关系**： - `@vant/weapp/button/index` → `miniprogram_npm/@vant/weapp/button/index.js` - `@vant/weapp/field/index` → `miniprogram_npm/@vant/weapp/field/index.js` - `@vant/weapp/form/index` → `miniprogram_npm/@vant/weapp/form/index.js` ### 2. 页面文件路径 假设我们在 `pages/index` 页面中使用 Vant 组件： **文件位置**： - `pages/index/index.json` - 页面配置文件 - `pages/index/index.wxml` - 页面结构文件 ## 完整代码示例 ### pages/index/index.json ```json { "usingComponents": { "van-button": "@vant/weapp/button/index", "van-field": "@vant/weapp/field/index", "van-form": "@vant/weapp/form/index" }, "navigationBarTitleText": "用户登录" } ``` ### pages/index/index.wxml ```html <van-form bind:submit="onSubmit"> <van-field name="username" label="用户名" placeholder="请输入用户名" value="{{ username }}" border="{{ false }}" /> <van-field name="password" type="password" label="密码" placeholder="请输入密码" value="{{ password }}" border="{{ false }}" /> <van-button type="primary" block>提交</van-button> </van-form> ``` ### pages/index/index.js ```javascript Page({ data: { username: '', password: '' }, onSubmit(event) { const { username, password } = event.detail.value; // 表单验证 if (!username) { wx.showToast({ title: '请输入用户名', icon: 'none' }); return; } if (!password) { wx.showToast({ title: '请输入密码', icon: 'none' }); return; } // 提交逻辑 wx.request({ url: 'https://api.example.com/login', method: 'POST', data: { username, password }, success: (res) => { if (res.data.success) { wx.showToast({ title: '登录成功' }); wx.navigateTo({ url: '/pages/home/index' }); } else { wx.showToast({ title: res.data.message, icon: 'none' }); } } }); } }); ``` ### pages/index/index.wxss ```css /* 页面样式 */ page { background-color: #f7f8fa; padding: 20rpx; } van-form { margin-top: 40rpx; } van-field { background-color: #fff; border-radius: 16rpx; margin-bottom: 24rpx; padding: 20rpx; } ``` ## 路径配置常见问题及解决方案 ### 问题1：组件路径错误 **错误信息**：`Component "van-button" does not exist` **解决方案**： 1. 确保已执行 `npm install vant-weapp -S` 2. 在微信开发者工具中重新构建 npm（工具 → 构建 npm） 3. 检查 `project.config.json` 配置： ```json { "setting": { "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" // 确保指向项目根目录 } ] } } ``` ### 问题2：样式未加载 **解决方案**：在 app.wxss 中添加全局样式 ```css /* app.wxss */ @import './miniprogram_npm/@vant/weapp/common/index.wxss'; ``` ### 问题3：自定义主题不生效 **解决方案**：在 app.wxss 中覆盖 CSS 变量 ```css /* app.wxss */ :root { --button-primary-background-color: #07c160; --button-primary-border-color: #07c160; --field-label-color: #333; --field-input-text-color: #222; } ``` ## 路径配置最佳实践 1. **使用路径别名**（适用于复杂项目）： ```json // app.json { "resolveAlias": { "@vant": "./miniprogram_npm/@vant/weapp" } } // 页面 json { "usingComponents": { "van-button": "@vant/button/index" } } ``` 2. **封装组件路径配置**： ```javascript // utils/componentPaths.js const vantComponents = { 'van-button': '@vant/weapp/button/index', 'van-field': '@vant/weapp/field/index', 'van-form': '@vant/weapp/form/index' }; module.exports = vantComponents; // 页面 json const vant = require('../../utils/componentPaths'); module.exports = { usingComponents: vant }; ``` 3. **自动化路径检查脚本**： ```javascript // scripts/check-components.js const fs = require('fs'); const path = require('path'); function checkComponentPaths() { const pagesDir = path.join(__dirname, '../pages'); const pages = fs.readdirSync(pagesDir); pages.forEach(page => { const jsonPath = path.join(pagesDir, page, `${page}.json`); if (fs.existsSync(jsonPath)) { const config = JSON.parse(fs.readFileSync(jsonPath, 'utf8')); if (config.usingComponents) { Object.entries(config.usingComponents).forEach(([name, path]) => { const fullPath = `miniprogram_npm/${path.replace('@vant/weapp/', '@vant/weapp/')}`; if (!fs.existsSync(fullPath)) { console.error(`❌ 组件路径错误: ${page} 页面的 ${name} 组件 (${path})`); } }); } } }); } checkComponentPaths(); ``` ## 跨平台路径兼容方案 如果需要在不同平台（微信、支付宝、百度等）使用 Vant，可以使用条件编译： ```json // pages/index/index.json { "usingComponents": { // #ifdef MP-WEIXIN "van-button": "@vant/weapp/button/index", "van-field": "@vant/weapp/field/index", "van-form": "@vant/weapp/form/index" // #endif // #ifdef MP-ALIPAY "van-button": "vant-alipay/button/index", // #endif } } ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值