微前端qiankun使用问题汇总

2024无限可能！

已于 2022-06-14 19:03:04 修改

阅读量871

点赞数 1

分类专栏：爬坑之路文章标签：前端

于 2022-06-14 19:02:19 首次发布

本文链接：https://blog.csdn.net/hbmern/article/details/125284194

版权

爬坑之路专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

原因分析：wabpack打包出的文件在加载时会使用运行时publicPath：webpack_public_path，而字体图标不会，只通过相对路径进行引用，所以会从父应用的根路径下引用，报404

解决方案：

配置webpack，具体的配置项如下：

  chainWebpack: config => {
    config.module
      .rule('fonts')
      .test(/.(ttf|otf|eot|woff|woff2)$/)
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        options = {
          name: '/static/fonts/[name].[ext]'
        }
        return options
      })
  },

问题持续更新中！！！