Vaadin14.8+SpringBoot部署Wildfly时CSS背景图404问题

• 生产模式执行mvn clean package -Pproduction时，Vaadin会自动编译./frontend目录下的前端资源，CSS文件会被压缩、重命名后放到WAR包的VAADIN/build目录下，不会保留原frontend/styles路径结构，你在WAR包中找不到原始CSS文件属于正常现象，不是打包错误。
• 你当前CSS里写的背景图路径存在两个错误：
  1. 按照Servlet 3.0资源映射规则，WEB-INF/classes/META-INF/resources/目录下的静态资源会直接映射到应用上下文根路径，不需要加/META-INF/resources前缀，你直接访问带该前缀的URL返回404就是这个原因。
  2. Spring Boot内嵌容器启动时默认上下文根是/，绝对路径解析不会出错；但部署到Wildfly后应用上下文根是/planyoureplaylist-1.0-SNAPSHOT，你写的从域名根开始的绝对路径无法匹配到应用内的资源。
• 你查到的14.6.2版本修复的路径Bug是前端构建时资源重写逻辑的问题，和你当前遇到的路径写法、部署上下文不匹配的问题无关。

1. 修正CSS中的背景图引用路径
   两种写法可选，优先选第一种相对路径写法，Vaadin生产构建时会自动处理资源复制、路径重写，适配任意部署上下文：
   • 方案一（推荐）：把图片目录移动到frontend/img/，和frontend/styles目录平级，CSS中写相对路径：

     background-image: url("../img/zac-bromell-QwrTnOlWAmI-unsplash.jpg");
     

   • 方案二：保留图片在src/main/resources/META-INF/resources/img/路径，CSS中写相对于应用上下文根的路径，去掉/META-INF/resources前缀：

     background-image: url("/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg");
     

2. 验证静态资源映射
   重新打包部署后，先直接访问不带/META-INF/resources前缀的图片地址，确认资源可正常访问：
   http://localhost:8080/planyoureplaylist-1.0-SNAPSHOT/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg
   如果该地址仍返回404，说明Wildfly没有正确识别Vaadin的静态资源目录，执行下一步配置。
3. 添加Wildfly专属部署配置
   在src/main/webapp/WEB-INF/路径下新增jboss-deployment-structure.xml文件，显式声明静态资源路径，内容如下：

   <?xml version="1.0" encoding="UTF-8"?>
   <jboss-deployment-structure>
       <deployment>
           <dependencies>
               <module name="com.vaadin" export="true" meta-inf="import"/>
           </dependencies>
           <resources>
               <resource-root path="WEB-INF/classes/META-INF/resources"/>
           </resources>
       </deployment>
   </jboss-deployment-structure>
   

开发模式下Vaadin通过内置前端开发服务器加载资源，路径解析逻辑和生产模式编译后的逻辑不一致，且Spring Boot默认上下文根为/，不会出现路径拼接错误，因此不能用开发模式的表现判断生产环境路径配置的正确性。

内容的提问来源于stack exchange，提问作者Zakon