qiankun微前端的子应用中 element-ui 的 icon 图标不显示的问题

• 环境：
  使用乾坤项目，主项目使用umiJS，子项目使用Vuejs。Vuex子项目使用ElementUI。

• 问题：
  结果项目启动后，主项目中的Vue项目，不显示图标，而单独启动Vue项目显示图标；

  
  

• 排查根因：
  element-ui 图标 icon 使用的 是 .woff .ttf 格式的字体图标，浏览器加载后以 <style> 标签的方式引入的，且 .woff 的引入方式为相对路径引入，因为 qiankun 框架的主应用地址和子应用地址不一样，导致加载 .woff 文件地址错误，所以图标不显示。

  
  
  
  

  而本地启动的时候url被处理成了全路径。

  
  

解决方案如下：

方案一：配置打包时 .woff 等文件的引入路径为 http/https 开头的完整路径。

注意：如果使用 nginx 部署的应用需要配置支持 .woff 和 .ttf 等文件的静态地址访问

方案二： 配置 url-loader 的 limit 参数大一些，从而使 .woff 和 .fft 等文件直接转成 base64，绕过路径问题。

module.exports = {
    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()
    },
}

THE END!