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

Question

Angular的文档告知我应该在Angular应用程序构建中使用--base-href参数进行生产,当它将部署在服务器的子文件夹中时:

如果将文件复制到服务器子文件夹中,请附加构建标志--base-href并进行相应设置.

例如,如果index.html位于服务器/my/app/index.html上,请将基本href设置为这样.

https://angular.io/guide/deployment

但是,angular-cli具有--deploy-url参数.工具文档将其描述为:

将部署文件的URL.

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

我已经看到当应用程序要部署在服务器的子文件夹中时使用--base-href的--deploy-url的解决方案.

这个问题

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

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

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

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

1. 从 Angular v13 开始已弃用
2. 会降低构建速度（尽管可能不会太显着）
3. 没有“定位相对模板（HTML）资产和相对 fetch/XMLHttpRequests”的base href好处。

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

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

上面我已经列出了 3 个差异。

正如您在问题中已经指出的那样，--base-href设置<base href>in index.html（有关详细信息，请参阅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 3

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

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

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

Answer 4

要将我的脚本放入“ / 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/目录中。