原文链接: 点我

自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误:

GET http://localhost:9090/WEB-INF/content/2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found)

在网上查了下解决办法,是因为elementUI的字体图标是.woff和.ttf格式的,在webpack的loaders中需要配置,在module:{loaders:{ }}中新增内容,如下:

 {
test: /\.(eot|svg|ttf|woff|woff2?)$/,
loader: 'file-loader'
}

然后通过npm安装file-loader依赖,命令如下:
npm/cnpm install file-loader --save
如果你足够幸运那么问题应该解决了。很不幸我就是不幸的那个,如果你也是,那么接着往下看


404没有了,可是引入的图标却成了这样子

 
image.png

所有字体图标全部显示方框。
多方查证才发现是安装的file-loader依赖和webpack版本冲突,但是又不敢随便修改webpack的版本,于是最后采用了一个方法,将file-loader更换为url-loader,于是问题圆满解决
附上module:{loaders:{ }}中新增的最终代码:

 {
test: /\.(eot|svg|ttf|woff|woff2?)$/,
loader: 'url-loader'
}

然后 npm/cnpm install url-loader --save

我遇到这个问题 npm install解决了 原因是webpack.base.conf.js里边多了一个

 {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},

分支代码有改动了,打包后的css文件里引用的字体路径不对了
原来的:
@font-face{font-family:element-icons;src:url(../fonts/element-icons.535877f.woff) format("woff"),url(../fonts/element-icons.732389d.ttf) format("truetype");font-weight:400;font-style:normal}

现在的
@font-face{font-family:element-icons;src:url(static/fonts/element-icons.535877f.woff) format("woff"),url(static/fonts/element-icons.732389d.ttf) format("truetype");font-weight:400;font-style:normal}

结论:相对路径引用错了,"static" 替换成 ".." 指向上一级的同级目录下的fonts/

elementUI字体图标不显示问题的更多相关文章

  1. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  2. Chrome 对于 glyphicon 字体图标不显示的解决的方法

    在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到  custom.css 文件,路径为: C:\Users\(username)\App ...

  3. vue iView 打包后 字体图标不显示

    问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...

  4. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

  5. 移动端字体图标不显示的Bug

    用16进制编码的字体图标在部分小米机型显示不正常. 测试机型:小米1,小米1s,小米2浏览器:微信6.1内置浏览器,QQ浏览器 5.7 X5内核字体图标:不显示svg图标:显示正常 以下来自额微信内置 ...

  6. bootstraps字体图标无法显示

    使用bootstraps字体图标,必须在css的同级文件夹下,建立新的文件夹为fonts,放入一下文件. 在还是无法显示字体图标的情况下,可查看bootstraps.css中的 @font-face ...

  7. react中iconfont字体图标不显示问题

    如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...

  8. thinkphp使后台的字体图标显示异常

    thinkphp使后台的字体图标显示异常 相似问题 1.thinkPHP的这些图标都不显示了-CSDN论坛https://bbs.csdn.net/topics/391823415 解答: 发现在别的 ...

  9. css精灵图&字体图标

    精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...

随机推荐

  1. 【php】日期时间

    一. 日期时间: a) 这是一块非常重要的内容,我们在windows当中,或者是将来要接触的定时器也好,都是需要使用到这一块内容的!二. PHP当中的日期时间: a) 时间戳:time()可以获取时间 ...

  2. discuz 用户整合 账号整合 ucenter php网站整合discuz用户

    引用:https://www.cnblogs.com/kenkofox/archive/2011/09/18/2180649.html 1.登录后台管理.(在论坛中,用创建论坛的admin账号登陆,然 ...

  3. vue-shop项目第一天(用于记录 个人学习)

    vue-shop 第一天 一.项目初始化 1.安装vuecli脚手架(依赖于webpack)[前端自动构建工具]. 2.安装插件(element-ui)[第三方插件库], 安装依赖(axios)[调用 ...

  4. go 闭包函数

    一.什么是闭包函数? 二.匿名函数可以被赋值给变量并作为值使用: package main import "fmt" func main(){ f() } func f(){ fo ...

  5. ubuntu 虚拟机复制后打开蓝屏解决办法

    sudo apt-get install xserver-xorg-lts-utopic sudo dpkg-reconfigure xserver-xorg-lts-utopic reboot

  6. matplotlib TransformWrapper

    2020-04-09 23:26:53 --Edit by yangray TransformWrapper 是Transform的子类, 支持在运行中替掉一个变换(可以是不同类型, 但维度必须相同) ...

  7. tf.nn.relu 激活函数

    tf.nn.relu(features, name = None) 计算校正线性:max(features, 0) 参数: features:一个Tensor.必须是下列类型之一:float32,fl ...

  8. delphi使用ADO在sql数据库存取图片的方法

    我一直不认为能把代码写的和天书一样的程序员是好的程序员,那不过是因为我真的对delphi也就是略懂皮毛,太深了看不懂.网上查询数据库存取图片的方式,看的是一头雾水,有人提出保存路径使用时再调用,方法很 ...

  9. B - Red and Black 直接BFS+队列

    There is a rectangular room, covered with square tiles. Each tile is colored either red or black. A ...

  10. SQLi —— 逗号,空格,字段名过滤突破

    前言 出于上海大学生网络安全大赛的一道easysql,促使我积累这篇文章.因为放了大部分时间在Decade和Babyt5上,easysql一点没看,事后看了WP,发现看不懂怎么回事,于是了解了一番. ...