Vaadin 24导出组件嵌入外部HTML页面时访问JS文件出现404错误

核心错误点 #

你的RecentJobablesEmbeddedExporter构造函数定义不符合Vaadin WebComponent导出器的要求：

• 构造函数使用protected修饰符，Vaadin框架无法实例化它
• 额外添加了String tag参数，WebComponentExporter子类必须提供public无参构造函数

修复步骤 #

1. 修正导出器构造函数
   将导出器代码修改为以下正确形式：

   public class RecentJobablesEmbeddedExporter extends WebComponentExporter<RecentJobablesEmbeddedView> {
   
       // 必须是public无参构造函数
       public RecentJobablesEmbeddedExporter() {
           super("recent-jobables-embedded-view");
       }
   
       @Override
       protected void configureInstance(WebComponent<RecentJobablesEmbeddedView> webComponent, RecentJobablesEmbeddedView recentJobablesEmbeddedView) {
           // 若需给组件传递外部参数，可在此添加配置逻辑
           // 示例：绑定WebComponent属性到组件方法
           // webComponent.addProperty("param", String.class).onChange(recentJobablesEmbeddedView::setParam);
       }
   }
   

2. 确保导出器被扫描到

   • 若使用Spring Boot，需保证导出器类位于主应用类的同包或子包下，或通过@ComponentScan指定扫描范围
   • Vaadin会自动扫描类路径下的WebComponentExporter子类，无需额外注解

3. 验证依赖与路径

   • 确认项目依赖包含Vaadin WebComponent支持（使用vaadin-spring-boot-starter时默认已包含）
   • 检查应用上下文路径：若你的应用配置了上下文路径（如/myapp），需访问http://localhost:8080/myapp/vaadin/web-component/recent-jobables-embedded-view.js
   • 重启应用，让Vaadin重新生成WebComponent的JS文件

4. 处理路由组件的嵌入兼容性
   由于你的组件同时是@Route视图，嵌入到外部页面时需注意：

   • 移除组件中依赖Vaadin路由上下文的逻辑（如HasUrlParameter相关的路由参数处理）
   • 若需传递参数，通过WebComponent的属性在configureInstance方法中绑定到组件

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