将 Angular 应用程序部署在与根文件夹不同的文件夹中答案

【问题标题】：Deploying Angular app in a different folder than root folder将 Angular 应用程序部署在与根文件夹不同的文件夹中
【发布时间】：2019-07-02 06:14:28
【问题描述】：

Angular 新手。如果部署在 nginx /var/www/mydomain.com/html 中，应用程序可以正常工作。但我想将它部署在/var/www/mydomain.com/html/myapp 文件夹中。我将nginx available sites 设置到此文件夹，index.html 工作正常。但是尝试从 /var/www/mydomain.com/html/images 文件夹（因此 404 错误代码）而不是 /var/www/mydomain.com/html/myapp/images 文件夹中检索 Angular 应用程序中的相对路径（例如，images/mypic.png）。如何在 Angular 中全局设置 url 前缀 /myapp，以便所有相对路径都具有此前缀。我在这里看到了一些答案，但它们需要更改组件代码。有没有办法在部署时进行此设置，以便可以在任何路径中部署相同的dist？

【问题讨论】：

您可以在 angular.json 或 angular-cli.json 文件中配置路径。给出关键“outputPath”的路径。例如：“outputPath”：“myapp”
看看this answer。
是的，这似乎是唯一的选择。我希望我可以在构建后在 dist 中进行更改。谢谢。
如果你使用 Webpack，this plugin 似乎可以工作。
您是否尝试在 index.html 或 angular.json 中设置正确的 baseRef？必须正确设置才能加载资产。

标签： angular nginx

【解决方案1】：

在`angular.json` > `build` > `options` 配置上添加这一行与目标子目录

        "baseHref" : "/v2/",
        "deployUrl": "/v2/",

**喜欢这个**

    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref" : "/v2/",
        "deployUrl": "/v2/",

【讨论】：

【解决方案2】：

使用以下命令，这里/myapp/是根站点的相对路径。

ng build --prod --base-href /myapp/

【讨论】：

很好 - 确保在子文件夹周围包含前导和滞后的“/”，否则可能会导致奇怪的路由行为

在angular.json > build > options 配置上添加这一行与目标子目录

在`angular.json` > `build` > `options` 配置上添加这一行与目标子目录