前言：最近使用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/…)这样才能正常。
大专栏