前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下。

一开始进展很顺利,百度了基本用法后安装:

npm install font-awesome –save

然后在main.js中引入:

import ‘font-awesome/css/font-awesome.css’

接下来就开始愉快的使用各种图标了:

1
2
<i class="fa fa-search"></i>
<i class="fa fa-star"></i>

npm run dev 之后效果也如预期般顺利,这样的:

然而,当我npm run build后生成dist文件夹,并部署之后发现情况改变了!

图标不见了!!

经过一些调试之后发现是webpack打包之后生成的css文件对字体的引用路径有问题:url(static/fonts/…)应该是url(../static/fonts/…)这样才能正常。
大专栏  在使用vue+webpack模版创建的项目中使用font-awesome8e317f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""/>

于是继续问伟大的度娘!
找到了一篇文章中午看到了曙光了(原文连接),正确的步骤应该如下:

1.安装依赖包

npm install font-awesome-loader less less-loader css-loader style-loader file-loader font-awesome -save

2.配置font-awesome-loader

打开项目目录build/webpack.base.conf配置font-awesome-loader如下:

开始运行npm run build,有一个错误来的措手不及!

还好,根据错误提示运行安装一下node-sass,所以:

3.安装node-sass

npm install node-sass@latest

此时,再执行npm run build时终于看见梦寐以求的效果,打包成功了。部署后运行也成了。

至此,可以随意使用font-awesome图标库了!

在使用vue+webpack模版创建的项目中使用font-awesome的更多相关文章

  1. 【vue】如何在 Vue-cli 创建的项目中引入 iView

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

  2. 【vue】如何在 Vue-cli 创建的项目中引入iView

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

  3. vue-cli+webpack在生成的项目中使用bootstrap方法(二)

    vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...

  4. 【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目

    1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 这次node.js不是主角,默认已安装好了,通过npm –v查看no ...

  5. vue-cli+webpack在生成的项目中使用bootstrap

    在也个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...

  6. vue-cli+webpack在生成的项目中使用bootstrap的方法

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行.那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下 ...

  7. vue-cli+webpack在生成的项目中使用bootstrap方法(一)

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...

  8. 在 Vue-cli 创建的项目中引入 Element-UI

    Element-UI 是饿了么前端团队退出了一套基于 vue.js 开发的 UI 组件库,在与 Vue-cli 创建的项目结合时,需要做以下配置: 1. 安装 loader 模块 cnpm insta ...

  9. 《论vue在前后端分离项目中的实践之年终总结》

    我是2014年的时候开始了解知道的vue,当时vue还不太成熟,想用但是又怕自己hold不住,况且那时候vue还没有成熟的(路由.验证.ui组件)插件,社区也是不温不火的,再说也没有合适的机遇让我去项 ...

随机推荐

  1. maven仓库镜像、私服与jdk版本配置

    --配置全局镜像,setting.xml <mirrors> <mirror> <id>alimaven</id> <name>aliyun ...

  2. MongoDB 索引 .explain("executionStats")

    MongoDB干货系列2-MongoDB执行计划分析详解(3) http://www.mongoing.com/eshu_explain3 MongoDB之使用explain和hint性能分析和优化 ...

  3. Qt QPixmap QImage 图片等比例缩放到指定大小

    QPixmap pixmap(path); //pixmap=QPixmap::fromImage(imgShow); pixmap = pixmap.scaled(, , Qt::KeepAspec ...

  4. 解决UITextView滚动后无法显示完整内容

    滚动UITextView,偶尔内容只显示一半,现象如下

  5. win10远程桌面身份验证错误,要求的函数不受支持

    出现原因win10最近安装了一个更新补丁导致的,当然可以直接卸载这个补丁,也可以安装操作来就可以.需要修改注册表里边的项目,添加下面的设置. 解决办法1.win+R 输入 regedit, 打开注册表 ...

  6. P - Atlantis (线段树+扫描线)

      There are several ancient Greek texts that contain descriptions of the fabled island Atlantis. Som ...

  7. wsdl中含ref="s:schema"时处理

    转载地址:http://ljhzzyx.blog.163.com/blog/static/38380312201471375946602/

  8. android采用MVP漫画APP、适配刘海屏、小黄车主界面、录音波浪动画、综合APP等源码

    Android精选源码 一款采用MVP架构的仿完整漫画APP源码 Android适配刘海屏幕 基于Xmpp协议的即时通讯社交软件(客户端+服务端) Android小黄车(ofo)app主页菜单效果 一 ...

  9. Yii框架的学习指南(策码秀才篇)1-2 一步步学习yii framework

    我也是新手,不过之前学习了tp和ci框架,所以尝鲜想看看yii到底有多强大. 如何新建一个webapp(网站应用)呢,下面是2个步骤: 1. cmd 切换到htdocs下面的yii目录下的framew ...

  10. 二:MySQL的操作

    1:创建数据库 create database  bjpowernode ; 2:使用数据库 use bjpowernode; 3:导入数据库文件sql source  然后把SQL文件拖过来就可以了 ...