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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python实现人脸识别代码
2017/11/08 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
python把1变成01的步骤总结
2019/02/27 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python利用faker库批量生成测试数据
2020/10/15 Python
Python如何telnet到网络设备
2021/02/18 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
建筑管理专业求职信
2014/07/28 职场文书
装配出错检讨书
2014/09/23 职场文书
人事文员岗位职责
2015/02/04 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
iPhone13将有八大升级
2021/04/15 数码科技
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android