Vaadin应用部署Tomcat 9后无法访问页面求助

问题背景 #

已将Vaadin应用部署至Tomcat 9，部署无错误、Tomcat运行正常、日志无报错（日志显示应用启动完成且处于生产模式），但浏览器访问时显示空白页；修改@Route值重新部署后出现404错误。主视图代码片段如下：

@Route(value = "")
@PreserveOnRefresh
public class EncyclopediaMainLayout extends VerticalLayout {

排查与解决步骤 #

1. 补全主视图逻辑 #

当前代码仅定义了类结构，未添加任何可见组件或初始化逻辑，这是空白页的直接原因之一：

• 必须添加构造方法，并在其中添加UI组件（如文本、按钮等），示例：

  @Route(value = "")
  @PreserveOnRefresh
  public class EncyclopediaMainLayout extends VerticalLayout {
      public EncyclopediaMainLayout() {
          // 添加可见组件确保页面有内容
          add(new H1("百科应用首页"));
          add(new Button("测试按钮"));
      }
  }
  

• 确认该类所在包被Spring组件扫描覆盖（需在@SpringBootApplication的扫描范围内）。

2. 确保生产模式前端资源已构建 #

日志显示应用运行在生产模式，Vaadin生产模式要求提前构建前端资源，否则浏览器无法加载必要的JS/CSS：

• 部署前执行生产构建命令：
  • Maven：mvn clean package -Pproduction
  • Gradle：./gradlew clean build -Pvaadin.productionMode
• 检查生成的WAR包，确认META-INF/VAADIN/build目录存在，且包含编译后的前端资源文件。

3. 核对访问路径与上下文路径 #

• Tomcat部署WAR包时，若WAR包名称为xxx.war，则应用上下文路径为/xxx，访问@Route("")的地址应为http://localhost:8080/xxx/，直接访问http://localhost:8080/会出现404。
• 日志提示已存在名为springServlet的Vaadin Servlet，需确认其映射路径为/*，确保所有Vaadin路由请求能被正确处理。可检查application.properties中是否有如下配置：

  vaadin.servlet.url-mapping=/*
  

4. 浏览器端调试定位 #

• 打开浏览器开发者工具（F12）：
  • 查看控制台是否有JS加载错误，这可能是前端资源缺失导致的；
  • 查看网络标签，确认是否有404的资源请求（如Vaadin核心JS文件），若有则需重新执行生产构建。

5. 检查路由配置的唯一性 #

• 修改@Route值后，访问路径需与value完全匹配，例如@Route("main")对应访问地址为http://localhost:8080/xxx/main；
• 确保没有多个视图使用相同的@Route值，避免路由冲突导致无法匹配。

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