自己搭建的Vue项目，没有使用vue-cli，引入elementUI时提示字体图标404，找不到文件，如下错误：
GET http://localhost:9090/WEB-INF/content/2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found)
在网上查了下解决办法，是因为elementUI的字体图标是.woff和.ttf格式的，在webpack的loaders中需要配置，在module:{loaders:{ }}中新增内容，如下：
{
test: /\.(eot|svg|ttf|woff|woff2?)$/,
loader: 'file-loader'
}
然后通过npm安装file-loader依赖，命令如下：
npm 或者 cnpm install file-loader --save
如果你足够幸运那么问题应该解决了。很不幸我就是不幸的那个，如果你也是，那么接着往下看
404没有了，可是引入的所有字体图标全部显示方框。
暴力解决方案：
在index.html引入样式文件CDN链接即可
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
引入成功后会发现之前的font-awesome无效，这时去源码查看会看到font-awesome图标前缀是fa fa-xxx形式，但element框架的图标源码格式为el-icon-xxx形式。
优雅解决方案：
多方查证才发现是安装的file-loader依赖和webpack版本冲突，但是又不敢随便修改webpack的版本，于是最后采用了一个方法，将file-loader更换为url-loader，于是问题圆满解决
附上module:{loaders:{ }}中新增的最终代码：
{
test: /\.(eot|svg|ttf|woff|woff2?)$/,
loader: 'url-loader'
}
然后 npm 或者 cnpm 来 install url-loader --save
或者尝试以下解决方法：
webpack module配置：(build目录下webpack.base.conf.js)
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
webpack utils.js 修改：（build目录下utils.js）
添加 publicPath: '../../'
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
图标显示出来了
