解决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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
微信小程序云开发(数据库)详解
May 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
php采集速度探究总结(原创)
2008/04/18 PHP
php常用图片处理类
2016/03/16 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
销售人员自我评价怎么写
2013/09/19 职场文书
财务经理的岗位职责
2013/12/17 职场文书
实习老师离校感言
2014/02/03 职场文书
超市国庆节促销方案
2014/02/20 职场文书
环境卫生标语
2014/06/09 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
Python如何让字典保持有序排列
2022/04/29 Python