编程 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 相关文章推荐

用CSS+JS实现的进度条效果效果

Jun 05 Javascript

用Javascript数组处理多个字符串的连接问题

Aug 20 Javascript

用JavaScript修改CSS属性的代码

May 06 Javascript

jquery点击页面任何区域实现鼠标焦点十字效果

Jun 21 Javascript

JS实现时间格式化的方式汇总

Oct 16 Javascript

探究Javascript模板引擎mustache.js使用方法

Jan 26 Javascript

详解Vue中过度动画效果应用

May 25 Javascript

Vue-Router实现组件间跳转的三种方法

Nov 07 Javascript

vue计算属性computed的使用方法示例

Mar 13 Javascript

详解ng-alain动态表单SF表单项设置必填和正则校验

Jun 11 Javascript

如何实现js拖拽效果及原理解析

May 08 Javascript

vue中的循环对象属性和属性值用法

Sep 04 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

PHP n个不重复的随机数生成代码

2009/06/23 PHP

深入解析php中的foreach函数

2013/08/31 PHP

Yii学习总结之数据访问对象 (DAO)

2015/02/22 PHP

Laravel框架实现超简单的分页效果示例

2019/02/08 PHP

使用JavaScript构建JSON格式字符串实现步骤

2013/03/22 Javascript

利用jquery动画特效和css打造的侧边弹出垂直导航

2014/04/04 Javascript

javascript实现客户端兼容各浏览器创建csv并下载的方法

2015/03/23 Javascript

jQuery中(function($){})(jQuery)详解

2015/07/15 Javascript

Jquery基础教程之DOM操作

2015/08/19 Javascript

JS实现适合于后台使用的动画折叠菜单效果

2015/09/21 Javascript

详解node Async/Await 更好的异步编程解决方案

2018/05/10 Javascript

使用Vue自定义指令实现Select组件

2018/05/24 Javascript

深入了解JavaScript 防抖和节流

2019/09/12 Javascript

[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局

2016/03/05 DOTA

pip 错误unused-command-line-argument-hard-error-in-future解决办法

2014/06/01 Python

python爬虫自动创建文件夹的功能

2018/08/01 Python

浅谈python之新式类

2018/08/12 Python

django_orm查询性能优化方法

2018/08/20 Python

Python3+Pycharm+PyQt5环境搭建步骤图文详解

2019/05/29 Python

使用 Python 在京东上抢口罩的思路详解

2020/02/27 Python

在python里使用await关键字来等另外一个协程的实例

2020/05/04 Python

利用Python如何制作贪吃蛇及AI版贪吃蛇详解

2020/08/24 Python

The Outnet亚太地区：折扣设计师时装店

2019/12/05 全球购物

linux面试题参考答案（4）

2014/09/21 面试题

岗位职责定义及内容

2013/11/08 职场文书

建筑个人求职信范文

2014/01/25 职场文书

施工员岗位职责

2014/03/16 职场文书

企业党员公开承诺书

2014/03/26 职场文书

2014年五四青年节活动策划书

2014/04/22 职场文书

大学竞选班长演讲稿

2014/04/24 职场文书

2014年化妆品销售工作总结

2014/12/01 职场文书

财政局个人总结

2015/03/04 职场文书

担保贷款承诺书

2015/04/30 职场文书

详解CocosCreator消息分发机制

2021/04/16 Javascript

sql server删除前1000行数据的方法实例

2021/08/30 SQL Server

Python 数据可视化神器Pyecharts绘制图像练习

2022/02/28 Python