Spartacus 在技術和架構（ library 釋出方式 vs 模板釋出方式，headless vs embedded，Angular vs JSP 技術棧）等各方面，都是一種全面的從 Accelerator 的完整正規化轉變。因此，對於 Commerce Cloud 已經使用 Accelerator 的客戶來說，並沒有直接的方法可以從基於 Accelerator 的 Storefront 遷移到使用 Spartacus library 的店面。 鑑於將基於 Accelerator 的店面遷移到 Spartacus 需要時間和工作量，SAP 建議採用分階段的工作方法，將 Spartacus 的部分功能與基於 Accelerator 的店面混合使用，並在兩者之間無縫切換。

本文介紹 Spartacus UI 和 Accelerator UI 混合使用的一個具體例子，技術實現基於 Spartacus 的 `External Route` 概念。

首先，我在 Spartacus app module 的實現程式碼裡，新增如下配置：

```typescript
provideConfig({
      routing: {
        internal: [
          '/**',
          '!/cart',
          '!/**/p/**'
        ]
      }
    }),
```

![](https://img-blog.csdnimg.cn/img_convert/b46987febb98ebc6dac1bca6ed1e6f0c.png)

上面配置的語義是，對於所有的 Storefront url，都使用 Spartacus 的 Angular 頁面來服務，除了 cart 頁面和 product 明細頁面之外，後兩者透過 Hybris Accelerator 頁面來呈現。取反的操作，透過上圖 83 和 84 行的 `!` 符號來指定。

我在 localhost:4200 啟動 Angular 應用，則 `localhost:4200/electronics-spa/en/USD/cart` 這個 url，不歸 Spartacus 路由控制，需要讓 Hybris Accelerator 來服務這個 url.

我起了另一臺 web 伺服器，在 3000 埠監聽，並服務 `localhost:3000/electronics-spa/en/USD/cart` 這個 url. 為此，我在 Angular 專案裡新建一個配置檔案 `proxy.conf.json`，內容如下：

```json
{
    "/electronics-spa/en/USD/cart": {
      "target": "http://localhost:3000",
      "secure": false,
      "logLevel": "debug"
    }
  }
```

![](https://img-blog.csdnimg.cn/img_convert/a684e8e9f81d5a64d40b678a2a9fa575.png)

這樣，`localhost:4200/electronics-spa/en/USD/cart` 會被 Angular CLI 自動重定向到 `localhost:3000/electronics-spa/en/USD/cart`.

以上就是所需的全部配置。執行時，當客戶點選 Spartacus cart 圖示之後，就自動開啟監聽在 3000 埠上的採取 Accelerator 實現的 cart 頁面。

另外，要繞過 Service Worker 快取並讓後端在整頁載入（或整頁重新載入）後提供響應，開發人員需要定義 Service Worker 的 ngsw-config.json 配置的 navigationUrls 屬性，並且需要指定 內部路由的 URL 模式。

SAP 電商雲 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用

相關文章