网站布局建设,高端网站开发,大师摄影作品网站,深圳将举行新闻发布会自己搭建的Vue项目#xff0c;没有使用vue-cli#xff0c;引入elementUI时提示字体图标404#xff0c;找不到文件#xff0c;如下错误#xff1a;GET http://localhost:9090/WEB-INF/content/2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found)在网上查了下解决办法没有使用vue-cli引入elementUI时提示字体图标404找不到文件如下错误GET http://localhost:9090/WEB-INF/content/2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found)在网上查了下解决办法是因为elementUI的字体图标是.woff和.ttf格式的在webpack的loaders中需要配置在module:{loaders:{ }}中新增内容如下1 {2 test: /\.(eot|svg|ttf|woff|woff2?)$/,3 loader: file-loader4 }然后通过npm安装file-loader依赖命令如下npm/cnpm install file-loader --save如果你足够幸运那么问题应该解决了。很不幸我就是不幸的那个如果你也是那么接着往下看404没有了可是引入的图标却成了这样子image.png所有字体图标全部显示方框。多方查证才发现是安装的file-loader依赖和webpack版本冲突但是又不敢随便修改webpack的版本于是最后采用了一个方法将file-loader更换为url-loader于是问题圆满解决附上module:{loaders:{ }}中新增的最终代码1 {2 test: /\.(eot|svg|ttf|woff|woff2?)$/,3 loader: url-loader4 }然后 npm/cnpm install url-loader --save我遇到这个问题 npm install解决了 原因是webpack.base.conf.js里边多了一个1 {2 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,3 loader: url-loader,4 options: {5 limit: 10000,6 name: utils.assetsPath(fonts/[name].[hash:7].[ext])7 }8 },分支代码有改动了打包后的css文件里引用的字体路径不对了原来的font-face{font-family:element-icons;src:url(../fonts/element-icons.535877f.woff) format(woff),url(../fonts/element-icons.732389d.ttf) format(truetype);font-weight:400;font-style:normal}现在的font-face{font-family:element-icons;src:url(static/fonts/element-icons.535877f.woff) format(woff),url(static/fonts/element-icons.732389d.ttf) format(truetype);font-weight:400;font-style:normal}结论相对路径引用错了static 替换成 .. 指向上一级的同级目录下的fonts/
