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

【问题标题】：What's the difference between --base-href and --deploy-url parameters of angular-cli toolangular-cli工具的--base-href和--deploy-url参数有什么区别
【发布时间】：2018-12-13 09:44:10
【问题描述】：

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

如果您将文件复制到服务器子文件夹中，请附加构建标志， --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参数有什么区别？我应该什么时候使用它们？

【问题讨论】：

标签： angular angular-cli

【解决方案1】：

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

我应该什么时候使用它们？

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

自 Angular v13 起已弃用
会降低构建速度（尽管可能不会太明显）
在"locating relative template (HTML) assets, and relative fetch/XMLHttpRequests."中没有base href的好处

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

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

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

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

比如下面的index.htmlsn-p：

<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)，例如一个包含<img src="assets/logo.jpg"> 的header.component.html，但你使用--deploy-url /public/，链接不会加前缀，并且会给你一个损坏的图像。如果使用--base-href /public/ 设置<base href="/public/">，这将起作用。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我正在关注这个线程，我的问题与这个问题相似。这是我的命令：“ng build --watch=true --baseHref=/dist/ --outputPath=D:\application_root\dist --deployUrl=/dist/”。我想说的是从 application_root 文件夹运行应用程序，但前端的所有代码都位于“dist”子文件夹中。我还必须将 index.html 从 dist 复制到根目录吗？
它是 --base-href /users/ 而不是 --base-href /users。（缺少斜线）
在严重错误得到解决之前投反对票。我知道博客没有--base-href 的终止斜杠，但根据official docs，它是至关重要的：<base href> path 应该以“/”结尾，因为浏览器会忽略 @ 中的字符987654329@ 跟在最右边的“/”之后。

【解决方案3】：

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

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

请看这些帖子：

【讨论】：

【解决方案4】：

为了将我的脚本放在“/test/app1/script/”文件夹中，我使用了command：

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/ 目录中。

【讨论】：

这是一个很好的答案，但要注意它会影响模块的延迟加载。例如：{ path: 'myModule', loadChildren: () => import( './myModule/my.module' ).then( m => m.MyModule ) }