dva 中 antd 离线图标使用
作者: dkvirus 发表于: 2018-08-22 17:13:50 最近更新: 2018-08-22 17:25:37

一、问题

dva+antd 写的项目部署到内网(无法连接网络),或者直接断开计算机的网络,会发现系统图标无法正常显示。

二、原因

  • 在控制台中发现会发送请求获取 alicdn.com 上的图标;
  • 内网无法连接外网,导致请求发不出去,页面上 antd 自带图标无法正常显示。

antd图标无法正常显示

三、解决

解决思路为将 antd 图标下载为本地文件。

  • font-download 下载最新 antd 字体库(图标就是字体);
  • 将下载的字体库放到静态资源目录 public 下,此时目录结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
|-- myapp
|-- public
|-- iconfont-antd
|-- iconfont.css
|-- iconfont.js
|-- iconfont.eot
|-- iconfont.svg
|-- iconfont.ttf
|-- iconfont.woff
|-- src
|-- .webpackrc.js
|-- package.json
  • 修改 .webpackrc.js 配置文件
1
2
3
4
5
6
7
8
9
10
export default  {
// ....
theme: {
"@icon-url": '"/iconfont-antd/iconfont"',
},
extraBabelPlugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]
],
// ....
}
首页
友链
归档
dkvirus
动态
RSS