uni-app uni-icon组件 vite编译相对路径报错

uni-app uni-icon组件 vite编译相对路径报错

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win11
HBuilderX类型 Alpha
HBuilderX版本 3.2.11
手机系统 Android
手机版本号 Android 12
手机厂商 华为
手机机型 123
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • vue3 cli版本。目前删除相对引用可以编译

预期结果：

  • 运行到app

实际结果：

  • 无法编译

bug描述：

  • cli版本编译到uni-app。
  • @font-face {
  • font-family: uniicons;
  • src: url(’./uni.ttf’) format(‘truetype’);
  • }

更多关于uni-app uni-icon组件 vite编译相对路径报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

一样 一样 我也是

更多关于uni-app uni-icon组件 vite编译相对路径报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个报错是由于 uni-app 的 uni-icon 组件在 vite 构建环境下对字体文件路径处理的问题导致的。

问题原因： 在 vite 构建环境中，相对路径 ./uni.ttf 在编译时会被重新处理，而 uni-app 的 uni-icon 组件内部引用的字体文件路径可能无法正确解析。

解决方案：

  1. 使用绝对路径（推荐） 将相对路径改为从 static 目录开始的绝对路径：

    [@font-face](/user/font-face) {
  font-family: uniicons;
  src: url('/static/uni.ttf') format('truetype');
}

  2. 修改 uni.scss 配置 在 uni.scss 文件中，确保字体路径配置正确：

    $uni-font-path: '/static';
回到顶部