uniapp使用阿里图标显示查找文件失败,在H5端图标显示正常但是在移动端不显示图标的问题解决,uniapp中如何使用阿里巴巴图标库
报错复现
文件查找失败:'./iconfont.ttf?t=1668559618255' at App.vue:6
文件查找失败:'./iconfont.woff2?t=1668559618255' at App.vue:4
文件查找失败:'./iconfont.woff?t=1668559618255' at App.vue:5
- 图标存放路径
报错原因
- 在uniapp 中不能使用相对路径去引入 图标所需要的配置文件 也就是
woff2、woff、truetype
三个文件
解决办法
方式1 将引入方式改为绝对路径
- @ 表示根目录 后面的路径根据自己存放的地址填入即可
方式2 将引入方式改为在线路径(适用于临时使用)
- 去到 阿里巴巴图标库>我的项目>Unicode
- 复制当前 CDN 在线服务路径
- 如果你使用了 在线路径你本地文件中
woff2、woff、truetype
三个文件 就可以删除了
- 复制的路径还需要再次修改路径 在路径前添加
https:
@font-face {
font-family: 'iconfont'; /* Project id 1784426 */
src: url('https://at.alicdn.com/t/c/font_1784426_ssx92i381rf.woff2?t=1668560647626') format('woff2'),
url('https://at.alicdn.com/t/c/font_1784426_ssx92i381rf.woff?t=1668560647626') format('woff'),
url('https://at.alicdn.com/t/c/font_1784426_ssx92i381rf.ttf?t=1668560647626') format('truetype');
}
吐槽一下
报错后改动了两次还是没能成功引用 然后我面向了百度开发,好家伙一个个误人子弟,😵💫全改成了网络的引入方式,后面还带了句亲测有效 。
特别让我震惊的是甚至有好几篇文章不仅让人引入在线配置文件 然后还说把woff2、woff、truetype
三个文件导入进项目,why? 然后 三个配置文件在哪里吃灰 也不进行配置
原因不说 区别不说 管用就行???看了不下8篇的解决文章全是一个模板,我想我不记录一下这个问题都对不起自己了
碰到问题解决问题永远是第一目标,但知道问题原因才能让你知道哪种解决方式是合理的,是适用自己当前项目的