如何修改Angular构建产物运行端口 避免与8080端口后端服务冲突

临时修改单次运行端口（最常用） #

直接在当前的http-server启动命令后添加-p参数指定自定义端口即可，示例如下：

http-server dist/locker-frontend -p 4200

参数说明：

• -p是port的缩写，后面跟你需要的空闲端口号，可替换为3000、8081等任意未被占用的端口
• 配置完成后访问地址对应修改为http://localhost:4200/#/即可正常访问

固定默认启动端口 #

如果不想每次启动都手动加端口参数，可以通过以下两种方式配置：

• 方式1：修改项目package.json的scripts字段，新增自定义启动命令

  {
    "scripts": {
      "start:prod": "http-server dist/locker-frontend -p 4200"
    }
  }
  

  后续启动直接执行npm run start:prod命令，就会自动使用指定端口启动
• 方式2：在项目根目录新增.http-server.json配置文件，写入以下内容

  {
    "port": 4200,
    "root": "dist/locker-frontend"
  }
  

  后续直接执行http-server命令，会自动读取配置文件的端口参数启动

额外提示：ng serve是Angular开发环境启动命令，本身不会生成dist目录下的构建产物，生产环境构建需要执行ng build命令。如果是开发阶段直接用ng serve启动项目需要改端口，直接执行ng serve --port 4200即可。

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