Element UI本地引用及图标显示异常问题

本地引用

按照官方的推荐引用方式是：

<!-- 引入样式 -->
<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>

想要本地引用就直接打开这两个链接去下载对应的js和css文件就好了。

图标异常问题

将上述两个文件引入后，样式可以正常使用，但图标无法正常显示。

解决方法： 首先按照上述贴出的官方推荐引用方式引用css和js，用浏览器打开测试页面，此时图标是正常显示的，但换为本地的引用后就会异常；此时使用浏览器的开发者工具，找到图标正常显示情况下的请求地址：

找到地址https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/fonts/element-icons.woff后直接选中右键跳转，浏览器会自动下载该图标相关文件；最后将下载好的图标文件放到css目录下的fonts目录下即可，没有则新建fonts目录，按照这个路径放图标文件都不用去改css中图标的路径。

注意

最好是用上述的方法去下载图标文件，也就是请求文件全路径，浏览器自动下载的形式，亲测这样才可行。我最开始是按照官方提供的开源地址去手动找到文件后下载下来引用后，依旧出错。