解决vue项目使用font-awesome,build后路径的问题


Posted in Javascript onSeptember 01, 2018

问题:

项目在本地run情况下显示正常,在build后font-awesome的css文件依赖的几个图标文件引用路径报错。

解决vue项目使用font-awesome,build后路径的问题

在webpack.base.conf.js中关于几个文件的配置如下:

{
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
}

解决:

通过和网上其他大神的配置对比上发现,有些webpack.base.conf.js的配置如下:

{
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader'
}

将配置中option注释掉即可解决路径问题。

后续:

这个方式是个治标的方式,不是问题的关键,关键应该在脚手架的其他配置上。

以上这篇解决vue项目使用font-awesome,build后路径的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
详解如何较好的使用js
Dec 16 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
JavaScript实现队列结构过程
Dec 06 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 #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
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
php事件驱动化设计详解
2016/11/10 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
pandas数值计算与排序方法
2018/04/12 Python
python实现随机漫步方法和原理
2019/06/10 Python
python 列表推导式使用详解
2019/08/29 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
python with (as)语句实例详解
2020/02/04 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
水利学院求职自荐书
2014/02/01 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
大学迎新标语
2014/06/26 职场文书
班级体育活动总结
2014/07/05 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
nginx lua 操作 mysql
2022/05/15 Servers