使用 ng build 建構後資源位址引用錯誤的問題

最近使用 Angular 做項目的時候，通過 <code>ng build</code> 打包後的資源位址都帶有 <code>localhost:4200</code>，百思不得其解，以為是打包的問題。

最後在 <code>index.html</code> 的檔案中發現有一個 <code>&lt;base&gt;</code> 标簽，原來這個标簽會在頁面的所有連結上添加預設位址。以下是詳細說明：

<code>&lt;base&gt;</code> 标簽為頁面上的所有連結規定預設位址或預設目标。 通常情況下，浏覽器會從目前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。 使用 <code>&lt;base&gt;</code> 标簽可以改變這一點。浏覽器随後将不再使用目前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <code>&lt;a&gt;</code>、<code>&lt;img&gt;</code>、<code>&lt;link&gt;</code>、<code>&lt;form&gt;</code> 标簽中的 URL。

注意：添加 <code>&lt;base&gt;</code> 标簽之後，對于使用相對路徑的接口請求位址也會改變，是以要慎重使用。

感謝您的閱讀，如果您對我的文章感興趣，可以關注我的部落格，我是叙帝利，下篇文章再見！

開發低代碼平台的必備拖拽庫 https://github.com/ng-dnd/ng-dnd

基于 Angular Material 的中背景管理架構 https://github.com/ng-matero/ng-matero

Angular Material Extensions 擴充元件庫 https://github.com/ng-matero/extensions

仿 Windows 照片檢視器插件 https://github.com/nzbin/photoviewer

仿 Windows 照片檢視器插件 jQuery 版 https://github.com/nzbin/magnify

完美替代 jQuery 的子產品化 DOM 庫 https://github.com/nzbin/domq

簡化類名的輕量級 CSS 架構 https://github.com/nzbin/snack

與任意 UI 架構搭配使用的通用輔助類 https://github.com/nzbin/snack-helper

單元素純 CSS 加載動畫 https://github.com/nzbin/three-dots

有趣的 jQuery 卡片抽獎插件 https://github.com/nzbin/CardShow

懸疑科幻電影推薦 https://github.com/nzbin/movie-gallery

鍛煉記憶力的小程式 https://github.com/nzbin/memory-stake