如何配置Angular项目实现同一项目支持多个本地域名访问

核心修改逻辑 #

Angular官方dev-server默认如果指定固定host，只会监听对应绑定的域名，把host改为0.0.0.0即可监听本机所有网络接口，所有绑定到本机IP的域名都可以访问服务。

具体操作步骤 #

• 修改angular.json中serve配置的host字段：
  把原有固定域名替换为0.0.0.0，你已经配置了disableHostCheck: true，不需要额外修改头校验规则，修改后的完整配置如下：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "spartacus:build",
      "disableHostCheck": true,
      "host": "0.0.0.0",
      "port": 4200
    }
  }
  

• 确认本地hosts文件已经将所有需要用到的门店域名（如my-store-de.local、my-store-ch.local等）都绑定到了本机IP（通常为127.0.0.1）
• 重启yarn start服务，之后使用任意绑定过的域名加4200端口访问，都可以正常加载项目

可选补充配置 #

如果不同门店需要对应不同的项目配置（比如不同的接口地址、站点标识等），可以在angular.json中配置多套serve配置项，启动时通过参数指定对应配置即可，示例：

"configurations": {
  "de": {
    "browserTarget": "spartacus:build:de"
  },
  "ch": {
    "browserTarget": "spartacus:build:ch"
  }
}

启动命令为yarn start --configuration=de或者yarn start --configuration=ch

内容的提问来源于stack exchange，提问作者Jake