vue引入font awesome 及webpack打包后图标不显示的问题

vue引入font awesome的方法:

npm install font-awesome --save

然后在main.js 中import 'font-awesome/css/font-awesome.css'

打包后发现图标不显示 报错为font awesome的相关文件引用路径问题;这是由于打包的配置文件webpack conf.base.js中:

{

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

        }

  }

limit的大小设置太小, 修改limit的大小为至少比font awesome的文件大,然后即可;

或者修改打包后的app .css中有关font awesome的引入文件的路径也可以。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,848评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,334评论 7 110
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,543评论 7 35
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本号 vue-c...
    tengrl阅读 9,113评论 0 0
  • 很多年后,当我再次拿起这些刻画着年轻记忆的遗物,我的出奇的平静,平静的就像在看一部小说,但那躁动的画面却可以瞬间浮...
    扑通公子阅读 681评论 0 0