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

UserData用法总结 lanyu出品

Jul 01 Javascript

基于jquery的复制网页内容到WORD的实现代码

Feb 16 Javascript

javascript实现图片切换的幻灯片效果源代码

Dec 12 Javascript

JQuery验证jsp页面属性是否为空(实例代码)

Nov 08 Javascript

javasciprt下jquery函数$.post执行无响应的解决方法

Mar 13 Javascript

jquery实现保存已选用户

Jul 21 Javascript

浅析jquery如何判断滚动条滚到页面底部并执行事件

Apr 29 Javascript

利用Javascript开发一个二维周视图日历

Dec 14 Javascript

从setTimeout看js函数执行过程

Dec 19 Javascript

详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

Nov 14 Javascript

微信小程序如何引用外部js，外部样式，公共页面模板

Jul 23 Javascript

Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

Dec 15 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函数代码

2010/04/22 PHP

解析PHP获取当前网址及域名的实现代码

2013/06/23 PHP

thinkphp模板用法和内容输出实例

2014/11/28 PHP

thinkPHP中验证码的简单实现方法

2016/12/05 PHP

[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】

2017/08/01 PHP

php识别翻转iphone拍摄的颠倒图片

2018/05/17 PHP

node.js 一个简单的页面输出实现代码

2012/03/07 Javascript

仿百度的关键词匹配搜索示例

2013/09/25 Javascript

Javascript基础知识（三）BOM，DOM总结

2014/09/29 Javascript

jQuery实现div横向拖拽排序的简单实例

2016/07/13 Javascript

JS数组操作之增删改查的简单实现

2017/08/21 Javascript

vue2.0移除或更改的一些东西(移除index key)

2017/08/28 Javascript

浅谈mint-ui 填坑之路

2017/11/06 Javascript

linux 后台运行node服务指令方法

2018/05/23 Javascript

JS使用tween.js动画库实现轮播图并且有切换功能

2018/07/17 Javascript

微信小程序入门之广告条实现方法示例

2018/12/05 Javascript

15分钟深入了解JS继承分类、原理与用法

2019/01/19 Javascript

详解一次Vue低版本安卓白屏问题的解决过程

2019/05/30 Javascript

vue-next/runtime-core 源码阅读指南详解

2019/10/25 Javascript

在webstorm中配置less的方法详解

2020/09/25 Javascript

使用Vant完成通知栏Notify的提示操作

2020/11/11 Javascript

python基础教程之简单入门说明(变量和控制语言使用方法)

2014/03/25 Python

跟老齐学Python之类的细节

2014/10/13 Python

Python实现的数据结构与算法之快速排序详解

2015/04/22 Python

python多进程读图提取特征存npy

2019/05/21 Python

用Python实现将一张图片分成9宫格的示例

2019/07/05 Python

django-filter和普通查询的例子

2019/08/12 Python

python 生成器和迭代器的原理解析

2019/10/12 Python

python编写扎金花小程序的实例代码

2021/02/23 Python

小程序canvas中文字设置居中锚点

2019/04/16 HTML / CSS

美国彩妆品牌：Coastal Scents

2017/04/01 全球购物

意大利和国际最佳时尚品牌：Drestige

2019/12/28 全球购物

.NET笔试题(20个问题)

2016/02/02 面试题

压缩Redis里的字符串大对象操作

2021/06/23 Redis

关于Python中进度条的六个实用技巧分享

2022/04/05 Python

Win11怎么添加用户?Win11添加用户账户的方法

2022/07/15 数码科技