解决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 相关文章推荐
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
jQuery ajax应用总结
Jun 02 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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取整的几种方式
2013/06/25 PHP
php合并js请求的例子
2013/11/01 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
python3中int(整型)的使用教程
2017/03/23 Python
python3中zip()函数使用详解
2018/06/29 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
Django model update的多种用法介绍
2020/03/28 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
教师实习自我鉴定
2013/12/14 职场文书
大四学生思想汇报
2014/01/13 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
给领导的检讨书
2014/02/16 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
刑事代理授权委托书
2014/09/17 职场文书
react 路由Link配置详解
2021/11/11 Javascript
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技