使用 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