datart作为子应用，发布到线上时，woff2等字体图标不展示，路径错误

mrcluo commented 2 years ago

技术栈 主应用： qiankun + vue 子应用: qiankun + datart

场景： 本地打开子应用datart，图标可以正常显示发布到线上环境，图标空白，如下图

问题定位： 控制台报错提示 Failed to decode downloaded font: https://predataenginecdp.71360.com/static/media/iconfont.86f52cba.woff2

发布到线上后，发现woff2等字体图标路径是 主应用域名 ，非datart子应用的域名，猜测是图标空白的原因，见上图

尝试解决： 网上搜索，解决方案：把图标的路径转为base64的，绕过路径的问题在craco.config.js里配置如下，但是打包(npm run build:test)后dist目录无文件变化，猜测下面的写法有问题，请问下面的配置要如何写呢

下面代码拥挤在一起了。。见上图 module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif|webp|woff2?|eot|ttf|otf)$/i, use: [ { loader: 'url-loader', options: { limit: 99999999, }, }, ], }, ], } }

Cuiyansong commented 2 years ago

https://qiankun.umijs.org/zh/guide/tutorial#%E5%BE%AE%E5%BA%94%E7%94%A8 https://github.com/umijs/qiankun/issues/2096

mrcluo commented 2 years ago

https://qiankun.umijs.org/zh/guide/tutorial#%E5%BE%AE%E5%BA%94%E7%94%A8 umijs/qiankun#2096

你好啊，我上面的写法就是抄官网的，但是Build后无文件变化，应该配置没成功。我上面截图的代码在craco里书写方式有问题吗

Cuiyansong commented 2 years ago

从产品角度考虑，我们目前不会将字体/图片等资源以base64的方式保存在独立的组件中，避免灵活性的损失和减少下载资源。当然，作为开源产品，你可以有自己的业务需求完成不同的实现，目前对于微前端的技术，我们涉猎不多。

mrcluo commented 2 years ago

从产品角度考虑，我们目前不会将字体/图片等资源以base64的方式保存在独立的组件中，避免灵活性的损失和减少下载资源。当然，作为开源产品，你可以有自己的业务需求完成不同的实现，目前对于微前端的技术，我们涉猎不多。

谢谢回复，辛苦你们了。上面的问题解决了。解决方式：craco有个addAfterLoader函数可以添加url-loader

running-elephant / datart

datart作为子应用，发布到线上时，woff2等字体图标不展示，路径错误 #1546