HTML base href 和 Angular APP_BASE_HREF 有什么区别？

Question

我正在开发一个Angular应用程序，需要设置HTML的base href值和/或APP_BASE_HREF值。

这两者之间有什么区别和关系？

- michaeljsalo

---

不是真的。我正在寻找这两个事物之间的明显区别。 - michaeljsalo

如果我的回答解决了你的问题，你能否接受我的答案？ - ahong

Answer 1

通常情况下，您只需要设置<base href>。

例外情况是，如果您无法访问index.html，或者您希望HTML5样式的URL与您提供Angular文件的位置不同（那么您需要提供APP_BASE_HREF）。

引用块中的问题是这两者之间的区别和关系？

“<base href>” 用于在生成 HTML5 风格的网址时作为默认基础 URL（查看源代码）。此外，它还"指定了用于解析相对 URL 的基本路径，例如图像、脚本和样式表" ，即您的 Angular 发布版。由于 <base href> 只是一个 HTML 元素，您可以查看 Mozilla 文档 以获取详细信息，并查看 社区 wiki 获取相关影响。

如果由于某种原因，您属于上述两个异常情况之一，可以提供APP_BASE_HREF，该值仅用于路由目的（使用PathLocationStrategy），不设置或与<base href>交互。

摘要

1. <base href>用作路由的基本URL，当未设置APP_BASE_HREF时。
2. 设置<base href>和APP_BASE_HREF的组合可用于显示的URL与实际文件位置不同的部署方案。
3. 如果使用PathLocationStrategy，则在您无法访问index.html的情况下，必须设置APP_BASE_HREF。

进一步阅读

• https://angular.io/guide/router#base-href-1
• https://angular.io/guide/deployment#the-base-tag
• https://angular.io/api/common/APP_BASE_HREF
• https://angular.io/api/common/PathLocationStrategy#description

- ahong

Answer 2

@ahong的回答非常准确，但我想通过一个例子来解释一下区别：

假设你有一个在mysite.com上托管的路由为/page1的应用程序。

如果没有设置任何内容，你的网站将显示位于mysite.com/page1路径下的页面。 APP_BASE_HREF 如果你想要在页面路由前面添加一些前缀，那么你可以在APP_BASE_HREF中设置。然后你的应用程序将把页面路由为mysite.com/your-app-base-href-value/page1。 --base-href或-br 这是你的应用程序加载资源的位置。当它需要下载一个名为xyz.js的文件时，它会从你的服务器上的mysite.com/your-base-href-value/xyz.js获取。请注意，这与你在页面1中看到的前端路由无关，而是与资源相关。如果你在网络服务器上部署了dist文件夹的子文件夹，这个设置就很有用。

- kwalski