pushuo
pushuo
  • 发布:2023-04-24 10:36
  • 更新:2023-10-19 17:46
  • 阅读:389

【报Bug】vue3,使用 iconfont 字体,云打包的时候报错。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 13.3.1

HBuilderX类型: 正式

HBuilderX版本号: 3.7.9

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 1

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

请看描述

操作步骤:

请看描述

预期结果:

请看描述

实际结果:

请看描述

bug描述:

使用 iconfont 字体,根据文档:https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html 配置,能正常运行,但是在云打包的时候就报错了,如下截图,

2023-04-24 10:36 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

是用了自定义图标吗?HBuilderX3.8.4 未复现此问题,请提供下复现示例(上传附件)【咨询问题/bug处理优先级规则】:https://ask.dcloud.net.cn/article/38139

  • 4***@qq.com

    请帮忙看下下面的回复,必现

    2023-10-13 17:47

4***@qq.com

4***@qq.com

vue3 iconfont

使用最新版的命令创建项目:npx degit dcloudio/uni-preset-vue#vite my-vue3-project
或者去gitee下载

把iconfont 放到/static/font目录下,修改了iconfont.css

其他不变

App.vue 引入:

<style>  
/*每个页面公共css */  
@import "./static/font/iconfont.css";  
</style>

page/index/index.vue 加入这条语句: <view class="iconfont icon-search"></view>

pnpm run dev:h5 正常
pnpm run dev:mp-weixin 报错

4***@qq.com

4***@qq.com

找到原因了,小程序是不支持本地字体文件的。如果要使用本地字体文件则需要转成base64,否则就得用线上的。

但是为什么我的项目在uniapp vue2版本上使用就没有问题呢?我想应该是webpack做了处理,还没找到原因

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

直接使用png,jpg等格式吧

要回复问题请先登录注册