编程 Javascript

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

Posted in Javascript onSeptember 01, 2018

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

npm run build

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

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文件路径的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

qq_33203555

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery技巧大放送学习jquery的朋友可以看下

Oct 14 Javascript

ExtJs的Date格式字符代码

Dec 30 Javascript

js给onclick事件赋值，动态传参数实例解说

Mar 28 Javascript

Jquery数字上下滚动动态切换插件

Aug 08 Javascript

js实现滚动条滚动到页面底部继续加载

Dec 19 Javascript

JavaScript实现使用Canvas绘制图形的基本教程

Oct 27 Javascript

jquery点击展示与隐藏更多内容

Dec 03 Javascript

老生常谈jquery中detach()和remove()的区别

Mar 02 Javascript

vue组件传递对象中实现单向绑定的示例

Feb 28 Javascript

ES6学习笔记之map、set与数组、对象的对比

Mar 01 Javascript

layui表格数据重载

Jul 27 Javascript

JS+JQuery实现无缝连接轮播图

Dec 30 jQuery

解决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

php 图片上传类代码

2009/07/17 PHP

浅析linux下apache服务器的配置和管理

2013/08/10 PHP

两款万能的php分页类

2015/11/12 PHP

php实现的统计字数函数定义与使用示例

2017/07/26 PHP

PHP与Web页面的交互示例详解二

2020/08/04 PHP

PHP执行linux命令6个函数代码实例

2020/11/24 PHP

JavaScript的9个陷阱及评点分析

2008/05/16 Javascript

javascript与CSS复习(二)

2010/06/29 Javascript

javascript打印html内容功能的方法示例

2013/11/28 Javascript

随鼠标移动的时钟非常漂亮遗憾的是只支持IE

2014/08/12 Javascript

AspNet中使用JQuery上传插件Uploadify详解

2015/05/20 Javascript

Javascript中Array用法实例分析

2015/06/13 Javascript

jQuery控制DIV层实现由大到小，由远及近动画变化效果

2015/10/09 Javascript

JS中artdialog弹出框控件之提交表单思路详解

2016/04/18 Javascript

javascript的replace方法结合正则使用实例总结

2016/06/16 Javascript

js 动态给元素添加、移除事件的实现方法

2016/07/19 Javascript

vue实现移动端H5数字键盘组件使用详解

2020/08/25 Javascript

Vue-cli打包后部署到子目录下的路径问题说明

2020/09/02 Javascript

在Python下使用Txt2Html实现网页过滤代理的教程

2015/04/11 Python

Python解决两个整数相除只得到整数部分的实例

2018/11/10 Python

Python 实现遥感影像波段组合的示例代码

2019/08/04 Python

浅谈django2.0 ForeignKey参数的变化

2019/08/06 Python

分享8点超级有用的Python编程建议(推荐)

2019/10/13 Python

python中数据库like模糊查询方式

2020/03/02 Python

基于python实现坦克大战游戏

2020/10/27 Python

HTML5中语义化 b 和 i 标签

2008/10/17 HTML / CSS

澳大利亚现代波西米亚风格女装网站：Bohemian Traders

2018/04/16 全球购物

图库照片、免版税图片、矢量艺术、视频片段：Depositphotos

2019/08/02 全球购物

华三通信H3C面试题

2015/05/15 面试题

系统管理员的职责包括那些？管理的对象是什么？

2013/01/18 面试题

幼儿教师国培感言

2014/02/19 职场文书

2014年两会学习心得体会

2014/03/17 职场文书

基层党组织整改方案

2014/10/25 职场文书

用python删除文件夹中的重复图片(图片去重)

2021/05/12 Python

Mysql Innodb存储引擎之索引与算法

2022/02/15 MySQL

索尼ICF-5900W收音机测评

2022/04/24 无线电