在微信小程序中使用vant组件库时字体报错

最新推荐文章于 2025-07-02 17:10:02 发布
原创 最新推荐文章于 2025-07-02 17:10:02 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在微信小程序中使用Vant库的van-icon组件时遇到的编译错误，解释了这一问题源于微信小程序的某些局限性，并指出开发者工具显示的错误可以被忽略，不影响实际运行。

在使用vant中van-icon时，经过编译的小程序代码报错，如下图
错误提示
解决办法：去了vant的官网和小程序官网，最终找到如下结果：
解决方案
所以就是微信小程序有一些缺陷导致了这个错误，这是开发者工具的错误，不需要解决，忽略就好

微信小程序从开发到上线步骤(持续更新)
5G工业互联网
08-03 6万+
电影小程序案例： 主界面如下：通过调用豆瓣电影的API接口获取到的信息，每次 加载10条数据，当滚动 条每次滚动到最低端的时候，自动通过异步再加载10条 评价按钮： 还可以上传图片并提交评价，提交的评价或者图片都是 储存到云存储当中，吧图片、评分以及评价的fileID存到我们 的云数据库当中， 而另一个选项：显示头像、用户名称以及openid 那么我们开始创建项目：后端服...
uniapp-小程序开发0-1笔记大全
简单玩家丶的博客
10-12 1272
生成keystore: keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystoreHBuilder官网：https://dev.dcloud.net.cn/pages/app/list通过微信小程序平台可以进行实时调试，注意部分vue api 无法运行到小程序,需要添加说明onLaunch 全局只触发一次 初始化完成 onShow uniapp启动 onHide 从前天
小程序使用Vant组件时报错Failed to load font解决方法
snoopy_13579的博客
05-10 1万+
小程序引用Vant组件后每次重新编译都会报错 [渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952
微信小程序引入VantUI组件出错
抗争小青年的博客
10-30 1468
快速开发页面时，发现按照Vant-ui上的说明一步一步下来，竟然报错了，解决问题后做个记录。这是我的配置，按照Vant-ui的官方文档将。今天我在用微信小程序时，想借助。但实际上，我的组件应该在。这样，问题就得以解决。
微信小程序 failed to load font
码农桃子的博客
04-15 2309
应该很少有人用到这个东西吧，这个是使用阿里图标库的图标导致的，是后台没有配置白名单。--开发设置–服务器域名–downloadFile合法域名，添加到里面即可。微信小程序控制台提示 Failed to load font。
微信小程序使用vant组件库的图标不显示
最新发布
m0_71185989的博客
07-02 252
摘要：文章对比了在微信小程序中使用van-icon组件的两种方式。第一种是将van-icon放在view标签内显示"待解锁"文字，可以正常渲染；第二种是将van-icon放在text标签内则无法正常显示。说明van-icon组件在小程序中需要配合特定容器标签才能正确呈现。
vant使用遇到icon图标不显示，显示为方块□□□□□
qq_41047017的博客
04-19 6478
vant使用遇到icon图标不显示，显示为方块□□□□□现象搜索找到的方法最终找到原因：最终现象 现象 <van-icon name="chat-o" /> <van-rate v-model="value" /> 搜索找到的方法 尝试之后但是结果并还是不行 最终找到原因： * { margin: 0; padding: 0; box-sizing: border-box; /* vant icon图标会报错 */ /* font-fam
微信小程序 Vant Weapp
lhblmd的博客
06-08 193
Vant Weapp 组件库
微信小程序爬坑记录
weixin_46166095的博客
03-16 659
微信小程序爬坑记录 开发微信小程序近两个月的小白，简单记录一下记忆比较深刻的坑 一 固定定位fixed scroll-view下不能通过fixed进行固定定位，无法到达页面底部，使用view即可。 二 canvas 业务中需要实现这样一个效果 vantWeapp 中有一个Circle 环形进度条的组件 大家需要注意的是size默认单位为px 而不是rpx 也就是说不可以自适应 需要通过 wx.getSystemInfoSync().windowWidth获取设备宽度后根据当前宽度得出一个系数实现自适应
微信小程序-1
weixin_64729620的博客
10-02 696
微信开发文档报错在调试器的console里找。
在微信小程序中使用vant的方法
12-03
在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S –production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install --production npm i vant-weapp -S --production 第二
踩坑记录_vant图标字体不生效，显示成小方框□
Potry Code的博客
11-06 4275
在使用van组件库的时候，采用的官方推荐的自动按需引入方式。 结果发现官方的图标字体一直都不生效，显示成小方框□。查询资料的时候大多说的是再才导入样式即可，可是发现还是不行。 最终在看样式的时候发现图标字体变成了这个，和正常显示的font并不一样。 最终发现是在引入Reset CSS格式化浏览器默认样式代码的问题。 这将会导致vant的默认图标字体全部进行更改，从而没有效果。 当然，所以你可以选择将格式化字体样式的代码删除，或者这里也推荐使用normalize.css进行浏览器默认样式的清除。 采用自动
Failed to load font https://img.yzcdn.cn/vant/vant-icon-d3825a.woff2 net::ERR_CACHE_MISS
liuarmyliu的博客
07-20 1万+
在微信开发者工具引入了vant weapp 库，但是在使用icon的时候，在开发者工具中无法显示icon，以及报错 在github上找到了一些回答 github 出现这个错误是开发者工具的问题，启用真机调试，看看真机上会不会有这个问题。如果真机上可以显示，那么就更新你的开发者工具（下载最新那版），之后再开发者工具里就可以看见图标了 ...
uniapp项目引用vant weapp组件库及icon字体图标库报错
qq_53841687的博客
09-23 3633
在HbuilderX里点击文件，新建项目，自定义项目名称选择默认模板。
【已解决】微信小程序wepy框架引入vant ui时，报错的解决办法。
黑夜的风的博客
12-08 6704
【场景还原】 今天尝试了下wepy引入vant框架。 首先，我先下载了vant小程序的组件。然后把其中的dist/button拷贝到了wepy项目的src/components目录。 OK。在页面引入： 路径是没有问题的。微信web开发者工具，启动！ … ？？报错了。报错信息说找不到common/index.wxss。 我们打开编译后的文件看一下： 哦。原来button引入了common这...
微信小程序使用vant组件所出现的一些问题
子玉的博客
11-24 1396
第三个是在根目录中，文件project.config.json内， "setting"对象中添加，注意，这个与官方配置有些不同，本身这个对象"miniprogramNpmDistDir":"./"，的属性值是有个地址的，但是我的第三个问题所提示的错误就是找不到路径，多了一层，这个根据 自身情况，如果加上路径报错，那就换成“./”路径。1. 确保你在正确的目录下：确认你当前所在的目录是你的小程序项目的根目录，即包含app.json和project.config.json等文件的目录。希望对大家有所帮助！
安装使用Vant及使用vue3+ts+vant报错解决方法
weixin_52053631的博客
02-21 1333
安装使用Vant及使用vue3+ts+vant报错Type string trivially inferred from a string literal, remove type annotation @typescript-eslint/no-inferrable-types解决方法
微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法
热门推荐
zxh7770的博客
03-26 2万+
微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法 1，搭建小程序 1.1 项目 - 新建项目 - 如下图所示： 1.2点击图中“新建”即可创建成功小程序项目。 2，安装vant- weapp库 2.0 - 在安装vant- weapp之前我们需要先初始化npm，然后在安装vant- weapp； 2.1 - 使用cmd命令行进入项目根目录，在项目根目录下面初始化npm ...
微信小程序使用vant组件报错
qq_39221747的博客
12-14 4658
背景介绍：在一个月之前新建了一个微信小程序项目，分别在两台电脑上跑过，之前预览开发版代码是在A电脑，手机扫描二维码之后可以正常使用，然后昨天在B电脑上改了东西，预览开发版手机扫描二维码之后一堆报错。报错如下： Component is not found in path "miniprogram_npm/@vant/weapp/loading/index" (using by "custom-tab-bar/index") Component is ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值