解决微前端qiankun中子应用打包后主应用访问不到其icon图标的问题

duansamve

已于 2022-06-08 16:42:31 修改

阅读量3.9k

点赞数

分类专栏： qiankun 文章标签：前端

于 2022-06-06 22:39:54 首次发布

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/125154453

版权

qiankun 专栏收录该内容

4 篇文章

订阅专栏

在使用qiankun微前端框架时，遇到子应用中的Element-UI字体图标无法显示的问题，原因是字体文件路径在父应用加载时出错。解决方法包括将静态资源上传至CDN，使用url-loader将字体文件转为base64，或者在vue.config.js中配置处理font文件。这些方案旨在修正因qiankun导致的相对路径问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

使用qiankun微前端库的时候，加载的子应用使用了element-ui的字体图标，子应用在独立运行时，字体图标可以正常显示，而在被父应用加载时，字体图标显示不出来。

Chrome的console中出现如下警告：

Failed to decode downloaded font: https://anyshare.aishu.cn/anyshare/static/fonts/element-icons.535877f5.woff
5E9B63FCAF2D440291A55D4DC0887B2C#/:1 OTS parsing error: invalid sfntVersion: 1008821359

解决方案：

1、所有图片等静态资源上传至 cdn，css 中直接引用 cdn 地址（推荐）；

2、借助 webpack 的 url-loader 将字体文件和图片打包成 base64（适用于字体文件和图片体积小的项目）（推荐）

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|woff2?|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

3、打包时vue.config.js中加入配置（如下），其作用是将 font文件编译成 base64 内嵌到css文件 @font-face{font-family:element-icons;src:url(data:font/woff;base64,d09GRgABAAAAAG4oAAsAAAAA：

module.exports = {
    chainWebpack: config => {
        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;
      });
    }
};

原因：

qiankun 将外链样式改成了内联样式，但是字体文件和背景图片的加载路径是相对路径。