vue-cli5 (webpack5) 项目 qiankun 微应用嵌入后图标不展示

发现问题

最近需要将一个项目以 qiankun 微应用嵌入另一个项目。遇到一个问题：qiankun 嵌入后 element-ui 的图标无法展示，但项目单独运行时是正常的。

问题项目相关依赖的版本信息
子应用
@vue/cli-service 5.0.8
element-ui 2.15.7
vue 2.6.14
主应用
qiankun 2.10.5

分析原因

element-ui 图标使用的是 .woff .ttf 格式的字体图标文件。文件引入方式为相对路径，qiankun 主应用和子应用地址不同，嵌入时加载字体文件路径不正确。像我的项目中，本该加载子应用 http://localhost:32638/static/fonts/element-icons.ff18efd1.woff ,结果加载的是主应用域名 http://localhost:8000 开头的。打开F12查看元素，搜索fonts：

单独打开应用看到的如下图

qiankun中子应用的fonts如下图：

qiankun官方就此问题给出了解释和解决方案。

按官方的解决方案试试

先尝试 url-loader 将字体文件打包成 base64

// vue.config.js
chainWebpack: (config) => {
    config.module.rule('fonts').use('url-loader').loader('url-loader').options({}).end();
},

我的天哪！单独运行的应用图标都不展示了！（二级菜单的箭头未展示）

是不是配置不完整，百度一下，修改配置如下：

// vue.config.js
chainWebpack: (config) => {
    config.module
      .rule('fonts')
      .test(/\.(ttf|woff)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .tap((options) => {
        options = {
          ...options,
          limit: 99999999,
          name: '[name].[hash:7].[ext]',
        };
        return options;
      })
      .end();
},

依然不行！

换 file-loader 试试在打包时注入完整路径

// vue.config.js
chainWebpack: (config) => {
    const fontRule = config.module.rule('fonts');
    fontRule.uses.clear();
    fontRule
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'fonts/[name].[hash:8].[ext]',
        publicPath: 'http://localhost:32638/',
      })
      .end();
},

还是不行！单独运行项目都不显示图标了！网络>字体里变成了这个样子。

难道是 vue-cli5 (webpack5) 的锅？

再来看看 qiankun 官方文档，可以注意到上述两种方案，都是 vue-cli3的写法。难道是 webpack5 的锅？

查资料，url-loader file-loader 加载资源 在 webpack5 已经过时了？ 参考 webpack5 的使用（四）：加载资源文件、webpack官方文档 资源模块

参考文档，添加了如下配置：

// vue.config.js
configureWebpack: {
    rules: [
        {
          test: /\.(ttf|woff)(\?.*)?$/,
          type: 'asset/inline',
        },
    ]
}

运行，然后就得到了如下一堆报错：

查询得知上述报错的原因是 asset/inline doesn't have filename.

终于成功解决

参考文章# vue-cli 5 配置svg和image inline模式，修改配置如下：

// vue.config.js
chainWebpack: (config) => {
    // 使 .woff 和 .fft 等文件直接转成 base64，解决微应用运行时字体图标不展示问题
   config.module
      .rule('fonts')
      .test(/\.(ttf|woff)(\?.*)?$/)
      .type('asset/inline')
      .set('generator', {})
      .end();
},

成功了！！ 字体文件被打包成了 base64，应用独立运行、qiankun嵌入都能正常展示图标啦！

可以开开心心回家过五一啦！五一快乐！