问题:
使用qiankun微前端库的时候,加载的子应用使用了element-ui的字体图标,子应用在独立运行时,字体图标可以正常显示,而在被父应用加载时,字体图标显示不出来。
解决方式:
配置字体图标打包方式使用url_loader,打包为base64
config.module
.rule("fonts")
.test(/.(ttf|otf|eot|woff|woff2)$/)
.use("url-loader")
.loader("url-loader")
.tap(options => {
options = {
// limit: 10000,
name: '/static/fonts/[name].[ext]',
}
return options
})
.end()
原因:
wabpack打包出的文件在加载时会使用运行时publicPath:webpack_public_path,而字体图标不会,只通过相对路径进行引用,所以会从父应用的根路径下引用,报404

配置前查看打包后的css文件:

配置后查看打包后的css文件:


在使用qiankun微前端框架时,遇到子应用中的Element-UI字体图标在被父应用加载后无法显示的问题。原因是webpack打包的字体图标未使用url_loader,导致引用路径错误。解决方法是配置字体图标打包为base64,确保其能正确跟随publicPath加载。
4247

被折叠的 条评论
为什么被折叠?



