如何为现有Spring Boot项目集成Vaadin并启动前端与路由？

我有一个无前端的Spring Boot项目，另有一个正常运行的Vaadin项目作为参考。给前者添加Vaadin 24依赖后，访问localhost:8888/login返回Whitelabel错误页面，启动日志里完全没有Vaadin相关的启动信息（比如开发模式、Vite编译日志），尝试过mvn clean install、vaadin:build-frontend等命令都无法解决。

已做的配置 #

POM.xml中的Vaadin配置 #

<properties>
    <java.version>11</java.version>
    <vaadin.version>24.0.5</vaadin.version>
</properties>
<!--adding vaadin!-->
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <!-- declare the latest Vaadin version
                 as a property or directly here -->
            <version>${vaadin.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>
<!--adding vaadin!-->
<dependencies>

    <!-- adding vaadin!-->
    <dependency>
        <groupId>com.vaadin</groupId>
        <!-- Replace artifactId with vaadin-core to use only free components -->
        <artifactId>vaadin</artifactId>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
        <version>${vaadin.version}</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.vaadin/vaadin-maven-plugin -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-maven-plugin</artifactId>
        <version>24.0.5</version>
    </dependency>

    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring</artifactId>
        <version>3.2.1</version>
    </dependency>
        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
                <execution>
                    <goals>
                        <goal>prepare-frontend</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
        <plugin>

LoginView测试代码 #

@Route(value = "login")
@PageTitle("Login | University Project")
@AnonymousAllowed
public class LoginView extends VerticalLayout implements BeforeEnterObserver {

    private final LoginForm login = new LoginForm();

    public LoginView() {

        addClassName("login-view");
        setSizeFull();
        setAlignItems(Alignment.CENTER);
        setJustifyContentMode(JustifyContentMode.CENTER);
        getStyle().set("background", "869fcb");
        Button login1 = new Button("Login");
        login.setAction("login");

        //////////////
        //HorizontalLayout back = new HorizontalLayout();
        //back.setSizeFull();
        //back.getStyle().set("background","red");
        //////////////
        add(toggleButtonTheme, new H1("University Project"), login, registrationButton);
    }

    Button toggleButtonTheme = new Button("Toggle dark theme", click -> {
        ThemeList themeList = UI.getCurrent().getElement().getThemeList(); // (1)

        if (themeList.contains(Lumo.DARK)) { // (2)
            themeList.remove(Lumo.DARK);
        } else {
            themeList.add(Lumo.DARK);
        }
    });

    Button registrationButton = new Button("Register", event -> UI.getCurrent().navigate("registration"));

    @Override
    public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {
        // inform the user about an authentication error
        if (beforeEnterEvent.getLocation()
                .getQueryParameters()
                .getParameters()
                .containsKey("error")) {
            login.setError(true);
        }

    }
}

问题排查与解决方案 #

1. 修复POM.xml的核心错误 #

• 插件位置错误：你把vaadin-maven-plugin放在了<dependencies>节点下，这是完全错误的，插件必须放在<build><plugins>节点内。
• 依赖冗余与版本不匹配：
  • vaadin-spring-boot-starter已经包含了vaadin、vaadin-spring等核心依赖，不需要单独添加这些依赖，避免版本冲突。
  • vaadin-spring的版本3.2.1对应Vaadin 14，和你用的Vaadin 24完全不兼容，必须删除这个单独的依赖。
  • vaadin-maven-plugin不需要作为依赖添加，只需要在<build><plugins>中配置即可。

修正后的POM核心部分示例：

<properties>
    <java.version>11</java.version>
    <vaadin.version>24.0.5</vaadin.version>
</properties>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>${vaadin.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <!-- 只需要这一个核心starter即可 -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <!-- Vaadin插件放在这里 -->
        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>${vaadin.version}</version>
            <executions>
                <execution>
                    <goals>
                        <goal>prepare-frontend</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

2. 确保Spring Boot扫描到Vaadin组件 #

检查你的Spring Boot启动类，确保它的包路径包含LoginView所在的包，或者显式添加@ComponentScan指定扫描范围：

@SpringBootApplication
// 如果LoginView在其他包下，添加如下配置，替换成你的实际包路径
// @ComponentScan(basePackages = {"com.your.package"})
public class CinemaAppApplication {
    public static void main(String[] args) {
        SpringApplication.run(CinemaAppApplication.class, args);
    }
}

3. 添加Vaadin配置项 #

在application.properties中添加必要的Vaadin配置，确保你的包被白名单允许：

# 替换成你的项目基础包路径
vaadin.whitelisted-packages=com.your.package
# 开发模式下启用热重载等功能
vaadin.dev-mode.enabled=true

4. 清理并重新构建 #

执行以下命令彻底清理并重建项目：

# 清理前端缓存
mvn vaadin:clean-frontend
# 清理项目构建文件
mvn clean
# 构建并启动项目
mvn spring-boot:run

启动后检查日志，如果看到Vaadin is running in development mode、Vite process started等日志，说明Vaadin已正常启动，此时访问localhost:8888/login应该能看到你的登录页面。

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