uview2.0版本，无网络下icon图标不显示

最新推荐文章于 2025-08-22 17:51:12 发布

原创最新推荐文章于 2025-08-22 17:51:12 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

uview 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了如何在项目中处理uview-ui的图标字体文件引用。原本图标字体文件是从阿里云线上库加载，通过将字体文件下载到本地static目录，然后修改u-icon.vue文件中的URL，实现从本地加载，提高应用性能。

在项目目录下找到 /node_modules/uview-ui/components/u-icon/u-icon.vue 路径的文件

由其中的代码片段

const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
	const domModule = weex.requireModule('dom')
	domModule.addRule('fontFace', {
		'fontFamily': "uicon-iconfont",
		'src': `url('${fontUrl}')`
	})

可知，官方使用的是阿里云图标库的线上库，浏览器访问https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf这个地址，下载字体文件放到本地的static文件目录下
然后将u-icon.vue文件中的https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf 统一替换为 /static/font_2225171_8kdcwk4po24.tt。

问题解决。