如何正确引用BTP Cloud Foundry上部署的SAPUI5复用组件以嵌入其他组件

核心问题 #

使用componentUsage复用同一CF空间内独立部署的UI5组件时，系统默认从SAPUI5 CDN的/resources路径加载资源，无法定位到自定义部署的组件。

实现步骤 #

1. 配置宿主应用路由映射 #

在宿主应用的xs-app.json中添加路由规则，将复用组件的请求转发到其CF部署地址：

{
  "routes": [
    // 保留原有路由规则
    {
      "source": "^/reuse-components/(.*)$",
      "target": "$1",
      "destination": "reuse-component-dest"
    }
  ]
}

需在BTP控制台创建对应Destination（reuse-component-dest），指向复用组件部署后的CF应用路由（如https://my-reuse-component.cfapps.eu10.hana.ondemand.com）。

2. 自定义UI5资源加载路径 #

在宿主应用的ui5.yaml中配置资源路径映射，告知UI5复用组件的实际位置：

resources:
  configuration:
    paths:
      "com/yourcompany/reuse/component": "/reuse-components/resources/com/yourcompany/reuse/component"

路径需与复用组件的命名空间、第一步的路由前缀完全匹配。

3. 配置Component Usage #

在宿主应用manifest.json中正常声明组件复用，确保componentName与复用组件命名空间一致：

{
  "sap.ui5": {
    "componentUsages": {
      "MyReuseComponent": {
        "name": "com.yourcompany.reuse.component",
        "settings": {},
        "componentData": {}
      }
    }
  }
}

此时UI5会根据ui5.yaml的配置，通过xs-app.json的路由转发到目标组件地址加载资源。

4. 部署验证 #

• 确认复用组件已部署到同一CF空间且路由可访问
• 重新部署宿主应用，测试组件是否成功嵌入加载

关键注意事项 #

• 复用组件的manifest.json需正确设置componentName及资源路径
• Destination的Proxy Type需设为Internet（CF内部应用可选用Cloud Foundry类型）
• 若使用UI5 Tooling构建，需确保宿主应用构建配置不会覆盖自定义资源路径

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