天天看點

關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系

直接在 SAP 電商雲 Spartacus UI 項目下,運作指令行

ng build

, 輸出如下:

關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系

dist 檔案夾:

關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系

把 dist 檔案夾下的

mystore

直接放到 tomcat

webapps

檔案夾下面,運作時:

關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系

如果修改

base

标簽頁的 href 屬性:

關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系

則 index.html 裡的幾個 JavaScript 資源檔案都加載不了:

關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系
關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系
Error: Error: Cannot get base site config! Current url (http://localhost:8080/mystore/) doesn't match any of url patterns of any base sites.
關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系

看看 ng serve 為什麼能夠工作?

localhost:4200 自動變成:http://localhost:4200/electronics-spa/en/USD/

關于 Angular 部署以及 index.html 裡 base hRef 屬性的關聯關系

我們不推薦修改 Spartacus 的 index.html 裡的 base 标簽頁的 href 屬性。

在開發過程中,開發人員通常在包含 index.html 的檔案夾中啟動伺服器。 這是根檔案夾,需要在 index.html 頂部附近添加

<base href="/">

, 此處的

/

是應用程式的根目錄。

但在共享伺服器或生産伺服器上,正如本文提到的 tomcat 的使用場景(我們将 ng build 生成的 dist/mystore 檔案夾整個拷貝到了 tomcat 的 webapps 檔案夾下)可能會從子檔案夾中為應用程式提供服務。 例如,當加載應用程式的 URL 類似于

http://www.mysite.com/my/app

時,子檔案夾是

my/app/

,應該添加

<base href="/my/app/">

index.html

的伺服器版本。

當基本标記配置錯誤時,應用程式無法加載,并且浏覽器控制台顯示

404 - Not Found

錯誤消息。