前言
官方推荐的css
及js
引用方式如下:
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
这种方式引入,如果环境只有内网,没有外网的话,会导致页面直接空白.
很简单把css
的href
及js
的src
的网址输入浏览器可以得到css
和js
的源码,直接拷贝到本地即可.
但是问题来了,element-ui
的index.css
拷贝本地之后,会发现图标无法正常显示了.
分析
F12
查看网络发现icon
的请求地址
点开详情发现请求链接(
element版本
不同这里网址应该也是不同的)
解决办法
访问https://unpkg.com/[email protected]/lib/theme-default/fonts/element-icons.woff
element-icons.woff
文件自动下载下来,放到项目的/css/fonts文件夹下即可
原因
在本地的index.css中发现如下代码是网络请求icon
的
@font-face {
font-family: element-icons;
src: url(fonts/element-icons.woff?t=1472440741) format('woff'), url(fonts/element-icons.ttf?t=1472440741) format('truetype');
font-weight: 400;
font-style: normal
}