当前位置: 代码迷 >> 综合 >> Vue UI框架「Vant」在离线无网络环境中使用 icon 无法显示的问题
  详细解决方案

Vue UI框架「Vant」在离线无网络环境中使用 icon 无法显示的问题

热度:21   发布时间:2023-12-24 05:38:11.0

 

UI组件中规中矩,很简洁,不是特别多,基本够用。Vant 官网

在内网中部署 Vue+Vant的项目时,发现所有的 icon 图标全部是小方块无法正常显示。

查看网络请求,发现图标字体引用的在线文件。

查阅官方文档,发现可以使用本地字体文件
在这里插入图片描述
我自己使用的方法配置如下:
main.js中配置:

import Vant from 'vant';
import 'vant/lib/index.css';
//利用本地logo字体
import 'vant/lib/icon/local.css';
Vue.use(Vant);

然后在离线环境下就可以愉快地使用 icon 啦。

  相关解决方案