书写此篇,主要针对您的项目是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字体请求的情况,如下图:
当然这是阿里蚂蚁金服antd的外网cdn地址无疑,安全并且高效,棒棒哒;但是若您的项目将来是部署在内网环境中使用的,此问题就是首要解决的了。
解决方案:iconfont字体本地化
步骤如下:
1 去官网下载最新的icon字体包,下载地址:https://ant.design/docs/spec/download-cn,点击下载如下位置:
解压之后,您只需要一下四个文件即可:
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