[ miniprogram/pages/index/index.json 文件内容错误] miniprogram/pages/index/index.json: ["usingComponents"]["van-button"] 未找到(env: Windows,mp,1.06.2301160; lib: 2.30.2)
如上错误,我用的typescript 写的微信小程序,js的走开吧,看看也可以
项目目录:
![](https://i-blog.csdnimg.cn/blog_migrate/e5a910df7bb7fb686339f8e3ce394efe.png)
项目引入依赖,在本项目的根目录下,执行一下命令:
#下载vant 依赖
npm i @vant/weapp -S --production
# 通过 npm 安装 如果你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。
npm i -D miniprogram-api-typings
修改app.json文件
将 app.json 中的 "style": "v2" 去除,小程序的 新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
修改project.config.json文件 在setting 里面添加如下代码,不会看图
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
]
![](https://i-blog.csdnimg.cn/blog_migrate/77fe20cdec575e4b8d41f4a87cf61e43.png)
解释:packageJsonPath 指定package.json文件,这个文件是用来记录依赖的
miniprogramNpmDistDir这个是用来指定 npm 构建后的内容 输出的位置。
配置tsconfig.json文件 在compilerOptions里面 添加如下内容 "lib":[] 这里文件本来有吧2020修改 ES6就好了
"lib": ["ES6"],
"baseUrl": ".",
"types": ["/node_modules/miniprogram-api-typings"],
"paths": {
"@vant/weapp/*":["/node_modules/@vant/weapp/dist/*"]
}
![](https://i-blog.csdnimg.cn/blog_migrate/4ca06c1bcaa1ecd75aa9d9d328bc81e3.png)
解释:我记得paths 的意思 ,就是把@vant/weapp/* 的替代成 /node_modules/@vant/weapp/dist/* 这个的作用是在引入vant组件时候 不用写那么长的路径
types是用来指定声明文件的路径的。在上面的例子中,它指定了使用了一个名为miniprogram-api-typings的声明文件,它位于当前项目的node_modules目录下。这个声明文件包含了小程序API的类型定义。
通过指定types,我们可以在代码中使用类型检查和自动补全等功能,从而提高代码的可读性和可维护性。
提示:如果这个types 没有指定正确也会报错,入标题那样,解决办法是重新点击 构建npm 会自动创建文件 miniprogram-api=typeings
点击构建npm
![](https://i-blog.csdnimg.cn/blog_migrate/159c69b89a64c0b4dea075122278456f.png)
好了,现在应该可以使用了,如何使用
随便一个页面,
引入如图内容
![](https://i-blog.csdnimg.cn/blog_migrate/0d72f5adbf2b8246fd79370f4ac48efb.png)
{"usingComponents": {
"van-button":"@vant/weapp/button/index"
}}
然后在index.wxml里面使用
![](https://i-blog.csdnimg.cn/blog_migrate/0d74aac3fdda4e0cceac628a5a2b6afa.png)
<van-button>hello</van-button>
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/db69fa853c4abc25cfd3868f297d3d11.png)
好了,那为什么会出错呢?
["usingComponents"]["van-button"]: "@vant/weapp/dist/button/index" 未找到(env: Windows,mp,1.06.230
看到我标红的吗,其实是引入的路径写错了,我自己手动引入,但是呢,刚刚我们是ts.config.js文件里写了映射对吗,就是那个替换,paths那个选项,它把@vant/weapp替换了,但是我们的dist 就写的多余了,我们
![](https://i-blog.csdnimg.cn/blog_migrate/4c17525cc4603540ba2576095b658bdf.png)