webpack配置导致字体图标无法显示的解决方法

 更新时间:2018年03月06日 11:01:23   作者:张晓艳  
下面小编就为大家分享一篇webpack配置导致字体图标无法显示的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题:在项目开发时使用字体图标,报错如下:

所有的字体图标都不能正常显示了,报错提示不能解码字体。

解决问题:找了很久,最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误:在 webpack.base.conf.js文件中删除

{ 
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 
    loader: 'file-loader' 
   }, 

总结:

其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译,自己写的和自动生成的产生冲突

以上这篇webpack配置导致字体图标无法显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于Vue实现timepicker

    基于Vue实现timepicker

    这篇文章主要为大家详细介绍了基于Vue实现timepicker效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue 页面卡死,点击无反应的问题及解决

    vue 页面卡死,点击无反应的问题及解决

    这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue实现购物车抛物线小球动画效果的方法详解

    vue实现购物车抛物线小球动画效果的方法详解

    这篇文章主要介绍了vue实现购物车抛物线小球动画效果的方法,结合实例形式较为详细的分析了vue.js实现抛物线动画效果购物车功能相关原理与操作注意事项,需要的朋友可以参考下
    2019-02-02
  • vue中使用event.target.value踩坑记录

    vue中使用event.target.value踩坑记录

    这篇文章主要介绍了vue中使用event.target.value踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 带你一步步从零搭建一个Vue项目

    带你一步步从零搭建一个Vue项目

    Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Vue基础配置讲解

    Vue基础配置讲解

    在本篇文章里小编给大家整理的是关于Vue基础配置讲解内容,有兴趣的朋友们可以学习下。
    2019-11-11
  • 解决vue无法设置滚动位置的问题

    解决vue无法设置滚动位置的问题

    这篇文章主要介绍了解决vue无法设置滚动位置的问题 ,需要的朋友可以参考下
    2018-10-10
  • 基于Vue 实现一个中规中矩loading组件

    基于Vue 实现一个中规中矩loading组件

    这篇文章主要介绍了基于Vue 实现一个中规中矩loading组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue之数据交互实例代码

    vue之数据交互实例代码

    本篇文章主要介绍了vue之数据交互实例代码,vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,有兴趣的可以了解一下
    2017-06-06
  • vue-cli3添加模式配置多环境变量的方法

    vue-cli3添加模式配置多环境变量的方法

    这篇文章主要介绍了vue-cli3添加模式配置多环境变量的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06

最新评论