vue.js iview打包上线后字体图标不显示解决办法


Posted in Javascript onJanuary 20, 2020

在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法:

1.在build文件夹下找到utils.js文件,把publicPath改为 ../../

if (options.extract) { 
 return ExtractTextPlugin.extract({ 
  publicPath:'../../', 
  use: loaders, 
  fallback: 'vue-style-loader' 
 }) 
} else { 
 return ['vue-style-loader'].concat(loaders) 
}

2.在build文件夹下找到webpack.prod.conf.js文件,修改extract为 false

module: { 
 rules: utils.styleLoaders({ 
 sourceMap: config.build.productionSourceMap, 
 extract: false, 
 usePostCSS: true 
 }) 
},

如果上面两种方案都没有解决的话,找到iview.css文件查看iview.css中引入font图标的地址是否正确

@font-face { 
 font-family: Ionicons; 
 src: url(../font/ionicons.eot?v=2.0.0); 
 src: url(../font/ionicons.eot?v=2.0.0#iefix) format("embedded-opentype"), url(../font/ionicons.ttf?v=2.0.0) format("truetype"), url(../font/ionicons.woff?v=2.0.0) format("woff"), url(../font/ionicons.svg?v=2.0.0#Ionicons) format("svg"); 
 font-weight: 400; 
 font-style: normal 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
js实现圆盘记速表
Aug 03 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
Angular单元测试之事件触发的实现
Jan 20 #Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 #Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 #Javascript
阿望教你用vue写扫雷小游戏
Jan 20 #Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 #Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 #Javascript
js原生map实现的方法总结
Jan 19 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
js实现中文实时时钟
2020/01/15 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python中的pprint折腾记
2015/01/21 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Python解析树及树的遍历
2016/02/03 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
优秀教师主要事迹
2014/02/01 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
2014年质量工作总结
2014/11/22 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
学校捐书倡议书
2015/04/27 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书