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

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

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

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

自動(dòng)添加了如下的資源：

添加了一個(gè) AppRoutingModule：

main.server.ts:

app.server.module.ts:

增加文件的具體細(xì)節(jié)，參考這個(gè) commit：
https://github.com/wangzixi-diablo/mystore31/commit/5a06fc7a904b8d0042497077f6f7a46398a975ec

最后使用這兩個(gè)命令：

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

我先執(zhí)行 ng build：

執(zhí)行 ng run mystore31:serve-ssr，進(jìn)行服務(wù)器端的 build：

啟動(dòng)服務(wù)器：
node dist/mystore31/server/main.js

如何調(diào)試

package.json 里加上一個(gè)配置：

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

npm run ssrdebug

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

點(diǎn)擊 inspect：

錯(cuò)誤消息：

An unknown http error occurred

通過調(diào)試，能找到這條錯(cuò)誤消息的拋出位置：

看看這個(gè) 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 錯(cuò)誤之后，仍然報(bào)同樣的錯(cuò)誤：

解決方案

在 node 啟動(dòng)命令前，加上參數(shù):

cross-env NODE_TLS_REJECT_UNAUTHORIZED=0

原始的錯(cuò)誤 An unknown http error occurred 消失了，出現(xiàn)了新錯(cuò)誤：

解決方案

修改 server.ts, 將超時(shí)參數(shù)設(shè)置為0，即永不超時(shí)：

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

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

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。