非网络引用element-ui css导致图标无法正常显示的解决办法

前言

官方推荐的css及js引用方式如下:

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>

这种方式引入,如果环境只有内网,没有外网的话,会导致页面直接空白.

解决办法

访问https://unpkg.com/element-ui@1.4.13/lib/theme-default/fonts/element-icons.woff?t=1472440741
element-icons.woff文件自动下载下来,放到项目的/css/fonts文件夹下即可

注意：下载版本需一致

最终效果图

 

最终没有成功的朋友 可以使用我的这个版本

链接：https://pan.baidu.com/s/1oo4ATMI-lWi_wNeXye6YMQ 
提取码：cook