解决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文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
JavaScript变量声明详解
Nov 27 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
jquery预加载图片的方法
May 27 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
js验证框架实现代码分享
May 18 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
ptyhon实现sitemap生成示例
2014/03/30 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python tkinter事件高级用法实例
2018/01/31 Python
python批量处理文件或文件夹
2020/07/28 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
理货员的岗位职责
2013/11/23 职场文书
售后服务承诺书
2014/03/26 职场文书
运动会宣传口号
2014/06/09 职场文书
钳工实训报告总结
2014/11/04 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
使用Ajax实现无刷新上传文件
2022/04/12 Javascript