乐趣区

关于前端:在微前端中antd-icon-createFormIconfontCN-的本地化问题

jiezi

首发于 语雀文档

前言

用过 antd icon 的敌人们可能晓得，其中介绍的用法是：

https://ant.design/components/icon-cn/#components-icon-demo-iconfont

import {createFromIconfontCN} from '@ant-design/icons';

const IconFont = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',});

ReactDOM.render(
  <div className="icons-list">
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </div>,
  mountNode,
);

能够看出，提供的是：（相对路径引入 / 外链引入）的形式，
但对于一些内网开发者和微前端利用开发者，仍不太齐全满足需要。

对于内网开发者

对于内网开发者，无奈连贯外网，应用相对路径引入的形式，能较好地解决图标资源本地化的问题。

对于微前端利用开发者

但对于微前端利用开发者（比如说咱们），相对路径引入的形式，仍无奈满足咱们解决图标资源本地化的问题。因为子利用一旦嵌入基座，因为浏览器中的 IP 域名就不再是子利用的 IP 域名，若申请未明确指定 IP 域名的状况下，申请会默认取浏览器中的 IP 域名（尽管大多是 umi+qiankun，会帮我解决绝大多数申请，让申请仍指向子利用的动态资源服务），如图：

font 的正确门路应该是：http:// 子利用 IP: 子利用端口 /fo…，
但因为子利用在基座（即：主利用）中运行，此时应用的是相对路径，能够发现收回的资源申请 URL 变成了：http:// 主利用 IP: 主利用端口 /fo…，这显著不对，报了 404 谬误。

我的解决方案

说实话，这并不难理解，只是过后一下子没想到，害我本人还去写了依据利用名获取对应利用地址，将其与图标资源文件进行门路拼接的办法。😂😂😂

我在网上搜了不少，只找到相对路径引入的形式来解决图标资源本地化，但没看到有如下的解决形式。
在我看来，在没有更多工夫去钻研 umi 配置的状况上来解决图标资源本地化，这是最快的解决方案。

const IconFont = Icon.createFromIconfontCN({scriptUrl: require('../assets/js/font_8d5l8fzk.js'),
});

当然，还有一种方法，那就是：CDN / OSS

退出移动版