前端打包到后台Vue elementui字体图标显示问题解决方案

Coder_3body

于 2021-04-02 09:38:15 发布

阅读量497

点赞数

分类专栏：打包部署文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44678356/article/details/115391264

版权

打包部署专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了当前端资源与SpringBoot后端项目混合部署时，字体图标（woff）无法正常加载的原因，主要是由于后端项目可能对字体文件进行了转义。为了解决这个问题，作者建议在Maven的pom.xml文件中配置maven-resources-plugin，将woff等字体文件类型设置为非过滤文件，确保浏览器能正确解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因分析

如果你的前端打包资源放置在了诸如 sprint boot 的后端项目中，可以看看是不是后端的项目把你的 woff 的字体图标文件进行了转义，导致浏览器解析失败。

解决方案

在maven文件的pom文件的build标签加入下面的

<plugin> 
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-resources-plugin</artifactId> 
  <configuration> 
     <nonFilteredFileExtensions> 
       <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
       <nonFilteredFileExtension>woff</nonFilteredFileExtension> 
       <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
     </nonFilteredFileExtensions> 
   </configuration> 
</plugin>