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 相关文章推荐
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
详解JS函数防抖
Jun 05 Javascript
微信小程序实现轮播图指示器
Jun 25 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获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
浅析JavaScript动画
2015/06/10 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python如何操作mysql
2020/08/17 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
承办会议欢迎词
2014/01/17 职场文书
小区文明倡议书
2014/05/16 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
python实现网络五子棋
2021/04/11 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python