Vaadin7迁移至Vaadin23时Maven build-frontend目标执行失败求助

核心问题分析 #

你遇到的问题主要有两个潜在根源：一是Vaadin依赖与Maven插件版本不匹配，二是自定义前端目录的配置或资源路径不符合Vaadin 23的规范，另外Vaadin 23的前端构建逻辑和Vaadin 7差异极大，旧的前端资源可能需要适配。

分步解决步骤 #

1. 统一Vaadin依赖与插件版本 #

主POM配置的是Vaadin 23.1.2，但插件用了23.3.11，版本不一致会导致前端构建的路径解析、资源处理逻辑出现冲突。直接把插件版本改成和主POM一致的23.1.2：
在你的POM（主POM或子POM）中找到vaadin-maven-plugin的配置，修改版本：

<plugin>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-maven-plugin</artifactId>
    <version>23.1.2</version> <!-- 与主POM的Vaadin版本保持一致 -->
    <executions>
        <execution>
            <goals>
                <goal>build-frontend</goal>
            </goals>
        </execution>
    </executions>
</plugin>

2. 校验自定义前端目录配置 #

子POM中指定的自定义前端目录必须正确指向包含components文件夹的路径：

• 检查插件配置里的frontendDirectory参数，确保路径准确（比如如果你的自定义目录是src/main/frontend-custom，那路径要写对）：

<plugin>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-maven-plugin</artifactId>
    <version>23.1.2</version>
    <configuration>
        <frontendDirectory>${project.basedir}/src/main/frontend-custom</frontendDirectory>
    </configuration>
</plugin>

• 确认components文件夹确实在指定的目录下，且三个JS文件名完全匹配（注意大小写，Linux/macOS环境下文件名大小写敏感）。

3. 适配前端资源的ES模块规范 #

Vaadin 23采用ES模块加载前端资源，和Vaadin 7的全局脚本模式不同：

• 确保dd-vertical-layout.js、custom-media-query.js、common.js是符合ES模块规范的，比如需要用export导出组件或方法，避免全局变量污染。
• 如果这些是自定义Web Component，要确保它们的定义符合Vaadin 23的组件注册逻辑，或者通过Java代码中的@JsModule注解正确引入：

@JsModule("./components/dd-vertical-layout.js")
public class DdVerticalLayout extends Div {
    // 组件逻辑
}

4. 彻底清理缓存后重新构建 #

旧的构建缓存可能残留Vaadin 7的资源或错误路径，执行以下命令彻底清理：

mvn clean -Dvaadin.clean.frontend install

这个命令会清除Maven本地缓存和Vaadin的前端构建缓存，确保从全新状态开始构建。

额外提醒 #

Vaadin 23和Vaadin 7的架构差异巨大，迁移时不要只盯着前端资源：

• 旧的Java组件API（比如Vaadin 7的com.vaadin.ui.VerticalLayout）已经完全替换，需要换成Vaadin Flow的对应组件（com.vaadin.flow.component.orderedlayout.VerticalLayout）。
• 如果这三个JS文件是Vaadin 7时代的自定义组件，建议直接用Vaadin 23的原生组件或重新开发符合Web Component标准的组件，避免依赖过时的前端代码。

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