码迷,mamicode.com
首页 > 其他好文 > 详细

elementUI字体图标不显示问题

时间:2019-08-24 11:30:29      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:pack   fill   提示   com   set   没有   element   替换   mod   

原文链接: 点我

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

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

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

1 {
2         test: /\.(eot|svg|ttf|woff|woff2?)$/,
3         loader: ‘file-loader‘
4 }

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


 

 

404没有了,可是引入的图标却成了这样子
 
技术图片
image.png

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

1 {
2         test: /\.(eot|svg|ttf|woff|woff2?)$/,
3         loader: ‘url-loader‘
4 }

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

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

1 {
2 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
3 loader: ‘url-loader‘,
4 options: {
5 limit: 10000,
6 name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
7 }
8 },

分支代码有改动了,打包后的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字体图标不显示问题

标签:pack   fill   提示   com   set   没有   element   替换   mod   

原文地址:https://www.cnblogs.com/myfate/p/11403983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!