解决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 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
js的2种继承方式详解
Mar 04 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
如何使用angularJs
May 08 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 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面试题附答案
2009/01/07 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
详解json在php中的应用
2018/09/30 PHP
使用原生js写的一个简单slider
2014/04/29 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python opencv之SURF算法示例
2018/02/24 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python绘制圆柱体的方法
2018/07/02 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
2014年公司工作总结
2014/11/22 职场文书
亲属关系公证书样本
2015/01/23 职场文书
会议室管理制度范本
2015/08/06 职场文书
导游词之吉林花园山
2019/10/17 职场文书