在VS Code中修改localhost端口，实现CMS与Next.js项目使用不同端口运行

• 修改项目启动端口配置
  1. Next.js项目：打开nextjs文件夹下的package.json，修改scripts字段的启动命令：
     开发环境启动改为 "dev": "next dev -p 3001"，生产环境启动改为 "start": "next start -p 3001"，配置完成后Next.js项目默认占用3001端口。
  2. CMS项目：根据你使用的CMS框架调整，通用方案有两种：一是在项目根目录的.env配置文件中添加PORT=3002；二是修改package.json的启动命令，添加端口参数，比如Strapi CMS可以在启动命令后加--port 3002。配置完成后CMS项目默认占用3002端口。
• 调整VS Code launch.json配置
  原有配置仅支持启动Next.js项目，你可以替换为以下配置，即可在VS Code调试界面选择对应项目分别启动：

  {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Next.js (Port 3001)",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\nextjs\\node_modules\\next\\dist\\bin\\next",
            "args": ["dev", "-p", "3001"],
            "cwd": "${workspaceFolder}\\nextjs"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch CMS (Port 3002)",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\CMS\\node_modules\\@strapi\\strapi\\bin\\strapi.js",
            "args": ["develop"],
            "cwd": "${workspaceFolder}\\CMS",
            "env": {
                "PORT": "3002"
            }
        }
    ]
  }
  

  补充说明：如果你的CMS不是Strapi，只需要调整第二个配置的program、args字段为对应CMS的启动入口和参数即可。
• 临时调试方案
  如果不需要长期修改配置，启动项目时手动指定端口即可：
  • Next.js项目：在nextjs目录下执行npx next dev -p 3001
  • CMS项目：在CMS目录下执行对应系统的端口指定命令即可，Mac/Linux环境执行PORT=3002 你的启动命令，Windows cmd环境执行set PORT=3002 && 你的启动命令，PowerShell环境执行$env:PORT=3002; 你的启动命令

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