angular-cli工具的--base-href和--deploy-url参数有什么区别

Question

Angular 的文档告诉人们应该在 Angular 应用程序构建中使用--base-href参数，以便将其部署在子文件夹中：

如果将文件复制到服务器子文件夹 append 构建标志--base-href并适当地设置<base href> 。

例如，如果index.html位于服务器上的/my/app/index.html ，则像这样将基本 href 设置为<base href="/my/app/"> 。

https://angular.io/guide/deployment

但是，angular-cli 具有--deploy-url参数。 该工具的文档将其描述为：

URL 将部署文件的位置。

https://github.com/angular/angular-cli/wiki/build

当应用程序要部署在子文件夹中时，我已经看到使用--deploy-url而不是--base-href的解决方案。

#问题#

angular-cli 工具的--base-href和--deploy-url参数有什么区别？ 我应该什么时候使用每一个？

Answer 1

• 路由正在使用Base-href
• deploy-url用于资产。

在大多数情况下，base-href 就足够了。

请看这些帖子：

• https://github.com/angular/angular-cli/issues/9835

• https://shekhargulati.com/2017/07/06/angular-4-use-of-base-href-and-deploy-url-build-options/

Answer 2

要将我的脚本放在“ /test/app1/script/ ”文件夹中，我使用以下命令：

ng build --prod --base-href /test/app1/ --deploy-url /test/app1/script/

因此，我的应用程序可在https://example.com/test/app1/访问，但我的 JS 脚本和 CSS 位于https://example.com/test/app1/script/目录中。

Answer 3

如果我想使用 /users 作为我的路由器应用程序基础和 /public 作为我资产的基础。

ng build --prod --base-href /users --deploy-url /public 

有关详细示例，请参阅Shekhar Gulati 的博客...

Answer 4

这里的答案并不完全准确，已经过时，也没有给出完整的解释。

我应该什么时候使用每一种？

tl;dr一般使用--base-href ，因为--deploy-url

1. 自 Angular v13 起已弃用
2. 会降低构建速度（虽然，可能不会太显着）
3. 在“定位相对模板 (HTML) 资产和相对 fetch/XMLHttpRequests”中没有base href的好处。

如果您需要 URL 与放置资源的位置不同，官方文档建议手动设置APP_BASE_HREF （并且不同，例如将--base-href设置为/public/并将APP_BASED_HREF为/users/如果您将提供 Angular 文件在https://example.com/public/但您希望网络应用程序的 URL 为https://example.com/users/ ）

angular-cli 工具的--base-href和--deploy-url参数有什么区别？

上面我已经列出了 3 个不同之处。

正如您在问题中已经指出的那样， --base-href <base href> --base-href在index.html设置<base href> （有关详细信息，请参阅Mozilla 文档，有关含义请参阅社区 wiki ），而--deploy-url为相关前缀index.html文件中的链接。

例如，以下index.html片段：

<link rel="stylesheet" href="styles.HASH.css">
...
<script src="main.HASH.js" type="module"></script>

使用--deploy-url /public/ ，将输出为：

<link rel="stylesheet" href="/public/styles.HASH.css">
...
<script src="/public/main.HASH.js" type="module"></script>

--deploy-url似乎只是为链接添加前缀，所以如果你改为--deploy-url public ，输出将几乎无法使用：

<link rel="stylesheet" href="publicstyles.HASH.css">
...
<script src="publicmain.HASH.js" type="module"></script>

最后，如果您有使用相对链接到资产，如模板（HTML） header.component.html包含<img src="assets/logo.jpg">但是你用--deploy-url /public/ ，该链接不会带有前缀，并且会给您一个损坏的图像。 如果<base href="/public/">使用--base-href /public/设置，这将起作用。

Answer 5

从 Angular v12 迁移到 Angular v14：

v12 之前

索引.html：

<base href="/">  // overriden by angular.json

package.json：

"start": "ng serve --base-href=/my-app/"  // obsolete

v14 之后

angular.json：

"baseHref": "/"  // used for finding .js files

app.module.ts：

providers: [{ provide: APP_BASE_HREF, useValue: '/my-app/' },  // used for routing

在 angular.json 中指定"deployUrl"对我不起作用。