如果你想使用NodeJS环境变量来设置Angular CLI开发服务器的端口值，可以采用以下方法:

创建NodeJS脚本，该脚本可以访问环境变量(比如DEV_SERVER_PORT)，并可以运行ng serve，使用该变量的——port参数值(child_process可能是我们的朋友):

const child_process = require('child_process');
const child = child_process.exec(`ng serve --port=${process.env.DEV_SERVER_PORT}`);
child.stdout.on('data', data => console.log(data.toString()));

更新包。Json提供这个脚本通过NPM运行 不要忘记设置DEV_SERVER_PORT环境变量(可以通过dotenv完成)

下面是对这种方法的完整描述:如何通过.env更改Angular CLI开发服务器端口。

转到这个文件

node_modules\@angular-devkit\build-angular\src\dev-server\schema.json

搜索端口

"port": {
  "type": "number",
  "description": "Port to listen on.",
  "default": 4200
},

更改默认值并重新启动服务器

对于角10+:

导航到angular。json文件。 搜索“serve”字段。 在“服务”下面是“选项”字段(如果不存在，添加选项字段)。 将这一行添加到“options”: "port": 4333(你想要的任何端口)。

例子:

        "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "port": 4333
      },
      "configurations": {
        "production": {
          "browserTarget": "dashboard:build:production"
        }
      }
    },

端口设置的位置已经更改了几次。

如果使用Angular CLI

改变angular-cli.json

{
  "defaults": {
    "serve": {
      "host": "0.0.0.0",
      "port": 5000 
    }
  }
}

如果使用最新的Angular CLI

改变angular.json

"projects": {
    "project-name": {
        ...
        "architect": {
            "serve": {
                "options": {
                  "host": "0.0.0.0",
                  "port": 5000
                }
            }
        }
        ...
    }
}

无需更改任何文件

执行命令

ng serve --host 0.0.0.0 --port 5000

永久的: 转到/ server.js nodel_modules / angular-cli /命令 搜索var defaultPort = process.env.PORT || 4200;把4200改成你想要的任何东西。 现在就跑: ng serve——port 4500(你可以把4500改成任何你想要的端口)

如果你有多个环境，你可以在angular.json中添加如下方式:

 "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "your_project:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "your_project:build:production"
        },
        "es5": {
          "browserTarget": "your_project:build:es5"
        },
        "local": {
          "browserTarget": "your_project:build:local",
          "port": 4201
        },
        "uat": {
          "browserTarget": "your_project:build:uat"
        }
      }
    },

这样只有本地指向另一个端口。