這個 Storefront 的本地地址：C:\Code\SPA\spa3.1\mystore31

基于的 SAP Spartacus 版本：大于 3.1.3，小于 4.0：

查看 package-lock.json 或者 yarn.lock, 得知安裝的實際版本是 3.4.1：

命令行：ng add @spartacus/schematics --ssr

自動添加了如下的資源：

添加了一個 AppRoutingModule：

main.server.ts:

app.server.module.ts:

增加文件的具體細節，參考這個 commit：
https://github.com/wangzixi-diablo/mystore31/commit/5a06fc7a904b8d0042497077f6f7a46398a975ec

最后使用這兩個命令：

npm run build:ssr && npm run serve:ssr

我先執行 ng build：

執行 ng run mystore31:serve-ssr，進行服務器端的 build：

啟動服務器：
node dist/mystore31/server/main.js

如何調試

package.json 里加上一個配置：

"ssrdebug": "node --inspect-brk dist/jerryssr/server/main.js",

npm run ssrdebug

打開 Chrome，地址欄輸入 chrome://inspect/#devices：

點擊 inspect：

錯誤消息：

An unknown http error occurred

通過調試，能找到這條錯誤消息的拋出位置：

看看這個 url 是不是在瀏覽器里能直接訪問：

https://20.51.210.49:9002//occ/v2/basesites?fields=baseSites(uid,defaultLanguage(isocode),urlEncodingAttributes,urlPatterns,stores(currencies(isocode),defaultCurrency(isocode),languages(isocode),defaultLanguage(isocode)),theme)

答案是不行：

解決了上圖 ERR_CERT_AUTHORITY_INVALID 錯誤之后，仍然報同樣的錯誤：

解決方案

在 node 啟動命令前，加上參數:

cross-env NODE_TLS_REJECT_UNAUTHORIZED=0

原始的錯誤 An unknown http error occurred 消失了，出現了新錯誤：

解決方案

修改 server.ts, 將超時參數設置為0，即永不超時：

const ngExpressEngine = NgExpressEngineDecorator.get(engine, { timeout: 0 });

執行 ng run mystore31:serve-ssr，重新 build，問題消失：

更多Jerry的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的给基于SAP Spartacus 3.4.1 版本的 Storefront 添加对服务器端渲染的支持的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。