当前位置：首页 > article >正文

Angular项目改端口号

article 2025/4/1 20:03:25

在 Angular 项目中修改开发服务器的端口号（默认是 4200），可以通过以下几种方式实现：
方法 1：通过 ng serve 命令行参数
直接在运行 ng serve 时指定端口号：

ng serve --port 4300

效果：开发服务器将在 http://localhost:4300 启动。

优点：临时生效，无需修改配置文件。

方法 2：修改 angular.json 配置文件
在项目的 angular.json 中为 serve 选项设置默认端口：

找到 projects -> [project-name] -> architect -> serve -> options。

添加或修改 port 字段：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "options": {
            "port": 4300  // 设置默认端口
          }
        }
      }
    }
  }
}

效果：每次运行 ng serve 都会自动使用该端口。

优点：永久生效，适合团队统一配置。

方法 3：通过环境变量
在 package.json 的 scripts 中定义自定义命令：

{
  "scripts": {
    "start:dev": "ng serve --port 4300"
  }
}

运行命令：

npm run start:dev

优点：灵活，可定义多个环境的不同端口。

方法 4：使用 --host 绑定特定 IP
如果需要指定主机和端口：

ng serve --host 0.0.0.0 --port 4300

用途：允许通过局域网其他设备访问开发服务器（默认仅限 localhost）。

额外场景：修改生产构建的端口
如果是生产环境（如通过 nginx 或 Node.js 部署），端口由部署的服务器配置决定，需修改对应的服务器配置文件（如 nginx.conf 或 server.js）。

常见问题
端口冲突：如果端口被占用，运行时会报错 Port 4300 is already in use。解决方案：

换一个空闲端口。

终止占用端口的进程（如 kill -9 $(lsof -t -i:4300)）。

HTTPS 配置：如果需要启用 HTTPS，可追加参数：

ng serve --port 4300 --ssl

总结
方法适用场景命令/配置示例
命令行参数临时修改端口 ng serve --port 4300
修改 angular.json 永久默认端口 “port”: 4300
package.json 脚本自定义多环境启动命令 “start:dev”: “ng serve --port 4300”
绑定 IP 允许局域网访问 ng serve --host 0.0.0.0 --port 4300

查看全文

http://www.kler.cn/a/619516.html