Angular项目在同一个项目下指定多个主机名答案

【问题标题】：Angular project specify multiple host names under same projectAngular项目在同一个项目下指定多个主机名
【发布时间】：2021-11-09 10:27:44
【问题描述】：

我有一个需要在 Angular 项目中设置的多商店站点，我将默认 localhost:4200 更改为我的自定义域，并且我的所有域都列在了我的主机文件中的同一 IP 下。

目前，当我运行 yarn start 时，它会在我的域上加载我的 angular 项目，而不是 localhost:4200，这很好用。

在 angular.json 中我设置了以下内容

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "spartacus:build",
        "disableHostCheck": true,
        "host": "my-store-de.local",
        "port": 4200
      },

如何更改此 hosts 属性以允许多个域，例如，如果我访问 my-store-ch.local，它也会在该域上加载项目。我看过类似的案例，但它们似乎都在 firebase 中，我没有使用这只是为了本地开发，现在任何帮助或能指出我正确方向的人将不胜感激！

【问题讨论】：

标签： angular webpack webpack-dev-server

【解决方案1】：

ng serve 仅用于开发目的，因此不支持您的需求。如果您将自定义域绑定到 127.0.0.1，您可以在 127.0.0.1 IP 地址（而不是域 localhost）上启动您的项目，那么一切都应该正常工作。

另一种解决方案是在localhost:4200 上启动应用程序，但另外在本地设置nginx Web 服务器（或 Apache，由您决定）设置少数本地域 + 在代理模式下使用它，类似这样

server {
  server_name my-store-de.local;
  listen 80;

  location / {
     index index.html;
     proxy_pass http://localhost:4200;
  }
}

【讨论】：