uniapp使用阿里图标显示查找文件失败，在H5端图标显示正常但是在移动端不显示图标的问题解决，uniapp中如何使用阿里巴巴图标库

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
1
2
3

• 图标存放路径

报错原因

• 在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');
}
1
2
3
4
5
6

吐槽一下

报错后改动了两次还是没能成功引用 然后我面向了百度开发，好家伙一个个误人子弟，😵‍💫全改成了网络的引入方式，后面还带了句亲测有效 。
特别让我震惊的是甚至有好几篇文章不仅让人引入在线配置文件 然后还说把 woff2、woff、truetype 三个文件导入进项目，why? 然后 三个配置文件在哪里吃灰 也不进行配置
原因不说 区别不说 管用就行？？？看了不下8篇的解决文章全是一个模板，我想我不记录一下这个问题都对不起自己了
碰到问题解决问题永远是第一目标，但知道问题原因才能让你知道哪种解决方式是合理的,是适用自己当前项目的

bye)🤡