react+webpack+wepack-dev-server的环境中ant design图标离线的方法

1、首先说说我老姜对官方提供的demo的理解, 在理解的过程也学到了不少知识。

图0

上图(图0)展示的官网demo的目录结构,node_modules是自己用node下载的, iconfont中是自己的离线图标这里不赘述,里面demo.*的都可以删除,那是给的样例,关于webpack基本配置的文件的知识客官你去百度就好,custom中是对图标路径变量的重新赋值,注意顺序, index.less是对ant样式文件的引用和变量文件的引用,没错这个可以和变量文件合并,到这已经对图标访问实现本地化了,只要 在使用icon前引用index.less就可以了,看似简单的已经实现了, 不过小编自己在一个坑里爬了一天才出来,这个坑就是webpack-dev-server这个小型服务器,框架是公司的,也是一点点排查发现的问题, 原因是这个服务器配置中把所有的路径的访问都返回了index.html(图2),这样实现离线图标的时候控制台就报错(图1),原因很明显因为返回的是index.html, 解决方法是在过滤的时候加个判断把访问iconfont资源的排除掉,解决方法如图3

Failed to decode downloaded font: http://localhost:8888/iconfont/iconfont.woff :8888/#/login?_k=qr6etl:1 OTS parsing error: invalid version tag

webpack-dev-server

 

 解决方法

 

posted on 2017-11-22 15:25  逃学威龙  阅读(769)  评论(0编辑  收藏  举报

导航