微前端的主应用是基于qiankun和umi框架搭建而成，主应用注册了多个子应用，子应用的ico需要动态设置显示后端获取的图标数据

# umi框架默认的配置

 headScripts: [
    {
      src: './scripts/loading.js',
      async: true
    }
    // {
    //   src: './favicon.ico',
    //   async: true
    // }
  ],
  links: [
    {
      href: './favicon.ico',
      type: 'image/x-icon',
      rel: 'icon'
    },
    {
      href: './iconfont.css',
      rel: 'stylesheet'
    }
  ],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在文件夹public下面默认是有favico.ico的默认图标的

# 所有的子应用图标相同

替换public文件下的favico.ico
links文件都不需要配置

# 子应用需要设置不同的图标

图标数据是从后台配置中获取，在运行时主入口接口获取到图标相关数据
获取图标link设置

data?.appLogo &&
document.querySelectorAll("link[rel*='icon']").forEach((item: any) => {
  item.href = data?.appLogo;

  // 设置图标的内联样式
  item.style.borderRadius = '8px';
});

1
2
3
4
5
6
7
8

设置图标的圆角样式，但是并没有生效

# 多次加载

上述设置后，会出现新的问题，多次加载，首先会加载默认的图标，因为如下配置：

 headScripts: [
    {
      src: './scripts/loading.js',
      async: true
    }
    // {
    //   src: './favicon.ico',
    //   async: true
    // }
  ],
  links: [
    {
      href: './favicon.ico',
      type: 'image/x-icon',
      rel: 'icon'
    },
    {
      href: './iconfont.css',
      rel: 'stylesheet'
    }
  ],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

删除public下的favico.ico文件
将配置href: ''设置为空字符串

 links: [
    {
      href: '',
      type: 'image/x-icon',
      rel: 'icon'
    },
    {
      href: './iconfont.css',
      rel: 'stylesheet'
    }
  ],

1
2
3
4
5
6
7
8
9
10
11
12

# 会加载umi默认的图标，如何解决

在public目录下创建一个空的favicon.ico文件，用于占位。
在你的应用中，使用Javascript动态修改favicon