解决vue-cli项目webpack打包后iconfont文件路径的问题


Posted in Javascript onSeptember 01, 2018

在使用vue-cli创建vue项目时,可以自动生成webpack文件。使用

npm run build

即可打包发布生产文件,打包后的文件

解决vue-cli项目webpack打包后iconfont文件路径的问题

webpack配置

可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件。全部样式文件打包在css目录下app.hash.css文件中。

但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题。

解决vue-cli项目webpack打包后iconfont文件路径的问题

解决方法:

在build/utils文件中的下图所示位置添加../../公共路径

解决vue-cli项目webpack打包后iconfont文件路径的问题

这样打包的iconfont字体文件路径时就会加上../../了。引用就没问题了。而不再需要手动更改css文件中的路径。

解决vue-cli项目webpack打包后iconfont文件路径的问题

以上这篇解决vue-cli项目webpack打包后iconfont文件路径的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 #Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 #Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 #Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 #Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 #Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
vue初始化动画加载的实例
Sep 01 #Javascript
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
第三节 定义一个类 [3]
2006/10/09 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
跟老齐学Python之print详解
2014/09/28 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
Python gevent协程切换实现详解
2020/09/14 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
小学生元旦感言
2014/02/26 职场文书
个人先进材料范文
2014/12/30 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
个人收入证明格式
2015/06/24 职场文书
劳动模范获奖感言
2015/07/31 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL