elementUI字体图标不显示问题

Posted 2022-06-27 myfate

原文链接：点我

 

自己搭建的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没有了，可是引入的图标却成了这样子

 

image.png

所有字体图标全部显示方框。
多方查证才发现是安装的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