在单个静态HTML中嵌入两个Vaadin应用仅第二个可加载问题排查

问题根因 #

你遇到的是Vaadin Web Component的全局运行时冲突问题：

• Vaadin构建导出的Web Component默认会依赖全局作用域下的window.Vaadin对象作为统一的客户端运行时入口，包含组件注册、路由、资源加载逻辑
• 你先后加载8081、8082两个不同Vaadin应用导出的JS文件时，后加载的8082端的JS会直接覆盖window.Vaadin对象的原有属性，导致第一个组件的运行时上下文丢失，自然无法渲染
• 两个应用的基础依赖（比如Vaadin组件库的公共JS、Lit运行时等）也会出现全局命名冲突，重复注册自定义元素时报错，打断第一个组件的初始化流程

解决配置步骤 #

方法1：给每个Vaadin应用配置自定义运行时作用域（推荐） #

Vaadin从Flow 23.0+开始支持给Web Component导出配置独立的运行时命名空间，避免全局冲突，你需要分别修改两个Vaadin应用的配置：

1. 8081端口应用的application.properties添加配置：

   vaadin.webcomponent.runtime-name=vaadinApp1
   

2. 8082端口应用的application.properties添加配置：

   vaadin.webcomponent.runtime-name=vaadinApp2
   

3. 两个应用分别重新打包构建后再启动，再加载到index.html里就不会冲突了

方法2：用iframe嵌入两个Vaadin应用（临时验证快速方案） #

如果你只是做POC快速验证，不需要深度集成自定义元素的能力，直接用iframe替换自定义标签即可，天然隔离运行时：

<!DOCTYPE html> 
<html>
    <head>
        <title>Simple example</title>
    </head>
    <body>
        <table style="border: 1px solid black">
            <tr>
                <td><iframe src="http://localhost:8081" width="300" height="200" frameborder="0"></iframe></td>
                <td><iframe src="http://localhost:8082" width="300" height="200" frameborder="0"></iframe></td>
            </tr>
        </table>
    </body>
</html>

额外排查点 #

如果配置完作用域还是有问题，打开浏览器控制台检查以下两点：

• 两个应用导出的自定义元素标签名是否全局唯一，不能重复
• 确认CORS配置允许主页面8000端口访问两个Vaadin应用的所有静态资源（不仅是JS入口，还有JS依赖的css、chunk资源）

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