用于启动前端和后端进行调试的 VS Code 设置

Question

我正在尝试在 VS Code 中建立一个简单的 React 前端和 NodeJS 后端并运行和调试。我正在使用复合启动配置来一起启动“客户端”和“服务器”。Nodejs 后端会自动为我启动，但我总是必须npm start在控制台中为客户端执行操作才能连接。我见过的所有教程都表明这一步必须在 VS Code 中运行调试配置之前进行。难道VS Code不能像NodeJS后端那样启动前端吗？

这是我的 launch.json 的样子：

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"compounds": [
    {
        "name": "Client+Server",
        "configurations": [ "Server", "Client" ]
    }
],
"configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Server",
        "program": "${workspaceFolder}/server/server.js"
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Client",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}/client/src/index.js"
    }
]
}

Answer 1

客户端需要 an 的原因npm start是因为您指的是http://localhost:3000

npm start 实际上会运行一个迷你 Web 服务器来在http://localhost:3000上提供 html 文件

http-server另一种方法是在 src 上使用类似的东西，这将具有相同的效果