Ant Design内网环境下显示图标,antd 显示离线包内容

20 篇文章 1 订阅
4 篇文章 0 订阅

       在做react开发时,遇到了打包后,页面不显示小图标的问题,去查看结果方案,发现大部分朋友提供的方案都是要去修改node-modules里面的内容,或者改打好包的bundle.js的内容,个人觉得这些解决方式不够简单,除了两种情况之外,你可以使用这些方案;

1.整个项目你自己开发,不需要和其他人沟通;

2.实在找不到其他解决方案了,而且这个问题很着急。

其他情况很不建议这么做,闲言少叙,说一下正规的解决方案。

第一种:(最简单,且建议大家这么做)

 antd@3.9.0+ 之后图标采用 svg 实现,不再从远程加载字体图标,所以只要npm安装最新的antd就可以了,不需任何其他的步骤。

第二种:使用了3.9.0之前的版本(恰好你比较懒,或者担心更改新版本之后会影响其他内容,还有可能你修改过node-modules中的内容)

Ant Design 默认的 iconfont 文件托管在 iconfont.cn 并默认使用平台提供的 alicdn 地址,公网可访问使用。

由于 alicdn 对部分域名有访问限制,或者需要内网环境使用。

可以参考官方的demo,https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont.

第三种:如果你是打包到移动设备,桌面应用这些没有办法访问地址的,建议你参考一下demo,或者按照别人的方式修改node-modules的内容去吧,小弟没有尝试过,也建议时间不是很充裕的人谨慎尝试。

开发的过程中,建议大家按照第一种方式直接来做吧。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值