因为网上找的vscode设置的教程多而杂，所以在此简单记录并分享一下在vscode里通过调试一键启动“vue+nodejs+浏览器”的方法。

1. 在vscode运行调试页点击创建 launch.json

1. 添加配置代码

{
    
    
  "version": "0.2.0",
  "configurations": [
    {
    
    
      "command": "npm start", //命令代码
      "name": "npm start",
      "request": "launch",
      "type": "node-terminal",
      "cwd": "${workspaceFolder}/doraemon-nodejs"
    },
    {
    
    
      "command": "npm run dev -- --host 0.0.0.0",
      "name": "npm run dev",
      "request": "launch",
      "type": "node-terminal",
      "cwd": "${workspaceFolder}/doraemon-vue"
    },
    {
    
    
      "name": "Launch Edge",
      "request": "launch",
      "type": "msedge",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}"
    },
  ],
  
  // 一键启动多个配置
  "compounds": [
    {
    
    
      "name": "原神启动！",
      "configurations": ["npm run dev", "npm start", "Launch Edge"]
    }
  ]
}

3. 选择设置的一键启动的名字，然后 原神启动！
   

[2025.3.9] 修改

修改后的配置代码，启动完成后再弹出浏览器，同时动态获取运行的端口

{
    
    
    "version": "0.2.0",
    "configurations": [
        {
    
    
            "name": "npm run dev",
            "request": "launch",
            "type": "node-terminal",
            "cwd": "${workspaceFolder}",
            "command": "npm run dev -- --host 0.0.0.0",
            "serverReadyAction": {
    
    
                "pattern": "Local:   http://localhost:([0-9]+)", // 匹配项目启动日志中的端口号
                "uriFormat": "http://localhost:%s", // 动态替换端口
                "action": "openExternally", // 触发浏览器打开
            }
        }
    ],
}