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

Question

Angular的文档指出，在将应用程序部署到子文件夹时，应在生产中使用--base-href参数来构建Angular应用程序：

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

- Rodrigo

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/

- Mac_W

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

- Bill Zelenko

---

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

Answer 3

如果我想将 /users 作为路由的应用程序基础，并将 /public 作为我的资源基础，

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

详细示例请参阅Shekhar Gulati的博客。

- Godfrey

---

我正在关注这个与我的问题类似的线程。这是我的命令：“ng build --watch=true --baseHref=/dist/ --outputPath=D:\application_root\dist --deployUrl=/dist/”。我的意思是从application_root文件夹运行应用程序，但所有前端代码都位于“dist”子文件夹中。另外，我需要将index.html从dist复制到根目录吗？ - Mark

应该写成--base-href /users/而不是--base-href /users（缺少斜杠）。 - bvdb

在关键错误被修复之前，请不要点踩。我知道博客中的 --base-href 没有终止斜杠，但根据官方文档这是至关重要的：_<base href> 的 path 应以“/”结尾，因为浏览器会忽略跟随最右侧“/”后面的 path 中的字符。_ - ahong

Answer 4

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

「引用」

我应该在什么时候使用每个选项？

「/引用」

tl;dr 通常使用 --base-href，因为 --deploy-url

1. 自 Angular v13 起被弃用
2. 会降低构建速度（虽然可能影响不大）
3. 没有 base href 的好处在于 "定位相对模板（HTML）资源和相对的 fetch/XMLHttpRequests。"

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

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

上面我已经列出了3个区别。

正如您在问题中已经提到的，--base-href 设置了 <base href> 在 index.html 中（详细信息请参阅Mozilla文档，以及相关影响请参阅社区维基），而 --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/">，这样会起作用。

- ahong

Answer 5

从Angular v12迁移到Angular v14：

v12之前

index.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" 对我没有起作用。

- Victor Stagurov

---

嗨 Victor，关于 baseHref 属性，在这三个中它在哪里找到？ - Slinker009

@Slinker009 它在 angular.json 文件中：projects > 你的项目名称 > architect > build > options > baseHref - Victor Stagurov