vant图标woff加载外网不能内网使用问题

最新推荐文章于 2025-01-13 11:53:26 发布
原创 最新推荐文章于 2025-01-13 11:53:26 发布 · 698 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Vue项目中使用Vant UI组件库时，针对内网环境配置字体图标资源的加载方式。通过在main.js文件中引入特定的样式文件，可以确保字体图标能够正确加载。

vant 的字体图标默认是从公网加载的，如果内网使用需要指定加载依赖里的字体图标。
如 vue 项目在 main.js 引入 vant 时指定加载字体图标样式

import 'vant/lib/icon/local.css';

解决问题不一定写很多代码，但一定要动脑子~~~

html本地离线引入vant和vue2（详细步骤）
请叫我欧皇！的博客
11-19 1372
需求：要在html中引入vant和vue2，并且是本地离线包引入，非cdn。
Vant使用自定义图标(阿里图标)
大圣归来圣骑士清欢的博客
04-08 2967
Vant使用自定义图标
Vant 离线/内网 引入本地 字体/Icon图标是小方块 “□”的解决办法
zhangxiaojun211的博客
10-09 2240
第一步：下载所需的 JS/CSS 样式文件到本地（点击对应的路径下载到本地；例如SpringBoot项目放到：static/css/** 以及 static/js/**） 第二步：修改index.css样式文件中的 https://*** 相关的信息 (1)找到 需要联网获取的 https：//** 相关的信息 (2)下载index.css 中 https://** 路径指向的文件下载到本地，进行替换 排错部分： 01：failed to deco...
有赞前端 UI框架「Vant」在离线无网络环境中使用 icon 无法显示的问题
热门推荐
ianly@梁炎的博客
11-07 6万+
有赞前端 UI框架「Vant」在离线无网络环境中使用 icon 无法显示的问题 第一次使用这个框架。UI组件中规中矩，很简洁，不是特别多，基本够用。Vant 官网 在内网中部署 Vue+Vant的项目时，发现所有的 icon 图标全部是小方块无法正常显示。查看网络请求，发现图标字体引用的在线文件。 查阅官方文档，发现可以使用本地字体文件 我自己使用的方法配置如下： 在main.js中配置： ...
关于@import ‘@vant/icons/src/encode-woff2.less‘ 报错问题
wzj12345545646的博客
02-17 2269
最近写手机端遇到了 这样的报错信息 起初解决的方案是进入这个中 显示的是如下情况 只需要在@前面加一个~就可以运行了 但是这是cnpm 安装依赖包遗留的问题，至于原因，我目前也不明白，但是用npm安装依赖包就不会产生这样的状况，好了，记录一个小问题 ...
解决vue打包文件中出现vant链接字体
dss0225的博客
08-26 429
3、重新npm i 或者 yarn install 使用默认地址加载依赖。该问题是因为npm使用非官方镜像源问题，切换回官方镜像源就会消失。4、这样build后的dist字体依赖就不再是链接形式。2、删除 .lock 和 node 依赖。...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
首先，问题的背景是这样的：在使用VantUI组件库时，开发人员可能会利用List组件的load事件来实现瀑布流式的滚动加载功能，这在处理大量数据项时尤为常见。当用户滚动列表至底部时，通过load事件触发并加载更多的数据...
在vant 中使用cell组件 定义图标该图片和位置操作
01-18
vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <van class=vanCellGroupClass><!--../../assets/tou.png--> <!--二级经营单位 value=未完成 size=large label=二级经营单位 class=...
vant 图标使用
最新发布
12-13
2. 图标不显示的常见问题及解决方法：需要添加`url-loader`依赖（引用[1]），或者引入本地CSS（引用[2]）。 3. 使用自定义图标（如阿里图标）的方法（引用[3]）。 因此，我们将指南分为三个部分： 1. 基本使用方法 ...
【Vant4】Vant4使用自定义图标(阿里图标)
此人太懒，没有任何简介
12-22 4873
Vant4使用自定义图标(阿里图标)
vue中引入并使用字体图标
believet93的博客
06-06 535
1、去阿里图标库（https://www.iconfont.cn/）将需要的图标加入购物车，选择好之后选择下载代码 2、将下载的文件解压放到vue项目中 3、在浏览器打开demo_index.html文件，文件中有三种使用方法，本文使用font class方式，本文使用此方式是因为web服务器处于内网，是无法访问外网的 4、在vue项目中使用，使用如下方式代替第一步的方式，在需要用到字体图表的vue文件中使用 <style scoped> @import url('../i
vant图标丢失问题
SailingCoder的博客
12-25 1580
有时在Vant的项目时，发现所有的 icon 图标全部是小方块无法正常显示。查看network，发现图标字体引用的在线文件无法请求到。解决办法，引入本地资源。
van-icon不显示 van-weapp-icon显示方块
zhaoyapeng_的博客
01-13 797
把font-family去掉或者放到别的地方就可以了。
vant 离线显示图标
lvye1221的专栏
11-28 3498
Vant 简介 移动端UI库 官网地址： https://youzan.github.io/vant 遇到的问题 生成的app，在手机没有网络的时候，图标加载失败。显示的是一个带 × 的方块，功能显示不正常。 解决办法 https://youzan.github.io/vant/#/zh-CN/icon 使用本地字体文件 Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要...
解决UI框架Vant在离线环境中 icon 无法正常显示的问题
weixin_47028422的博客
04-21 2963
问题 在内网部署项目时发现icon图标不能正常显示，查看后发现字体图标的文件引用的是网络上的资源，查阅官方文档，发现可以使用本地字体文件。 解决方案 在main.js中配置： import 'vant/lib/icon/local.css'; ...
微信小程序请求错误时使用vantWeapp的空状态(van-empty)
zhudingfengshen的博客
12-14 2368
文章目录前言一、van-empty是什么？二、使用步骤1.引入2.读入数据 前言 本文介绍了vant-weapp一些组件的使用经验 提示：以下是本篇文章正文内容，下面案例可供参考 一、van-empty是什么？ vant-empty是vantWeapp展示类组件中的一个组件，适用于系统发生各种错误以及网络错误或者展示各种提示，支持自定义图片、描述文字以及底部插槽。 二、使用步骤 1.引入 代码如下（示例）： { "usingComponents": { "no-right": "../../
vue vant Image组件 图片加载时 与 加载失败 的处理方法
我总是词不达意的博客
05-25 6484
vant Image组件 图片
解决vant图标放正式环境不显示问题
qq_41283061的博客
07-07 2023
在mian.js导入 import ‘vant/lib/icon/local.css’
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值