书写此篇,主要针对您的项目是create-react-app搭建的(未eject配置的),并且用的antd-design UI库还是2.x版本之前的,本篇也许对你有极大帮助。
此时的antd已经是3.9.1版本了,早早的已经是3.x以上了,也不存在上述问题,那么您可以忽略此篇了!

以下本人以"antd": "^2.13.2",做分析,此项目中您就会遇到,请求中有https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff这个icon字体请求的情况,如下图:
1.png
当然这是阿里蚂蚁金服antd的外网cdn地址无疑,安全并且高效,棒棒哒;但是若您的项目将来是部署在内网环境中使用的,此问题就是首要解决的了。

解决方案:iconfont字体本地化

步骤如下:

1 去官网下载最新的icon字体包,下载地址:https://ant.design/docs/spec/download-cn,点击下载如下位置:

2.png
解压之后,您只需要一下四个文件即可:
3.png

2 在项目的静态资源目录中,例如 /public目录下,新建localiconfont目录,然后把上述4个文件拷贝进来。

3 在config-overrides.js文件中(根目录下文件,用于重写配置),代码如下:

const path = require('path');
const {injectBabelPlugin} = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
 
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
    config = rewireLess.withLoaderOptions({
        modifyVars: { 
            "@icon-url": "'/localiconfont/iconfont'" //iconfont本地化
         },
      })(config, env);
  
    return config;
};

4 完毕,运行npm start或者npm run build均可。

网上也有比较多的介绍,大家可以参考:

https://blog.csdn.net/xiaoyu19910321/article/details/73750061
https://blog.csdn.net/zhaoyu_m69/article/details/78800887

标签: none

添加新评论

选择表情