如何在调试时将 VS Code 配置为运行 npx vite dev

Question

我是 VS Code 和 JavaScript 的新手，我正在尝试使用 Vite and Svelte 制作一个简单的应用程序，但我遇到了一个似乎无法解决的问题。（我的代码目前只是创建新项目时给出的默认代码，我完全没有更改。）

当我运行我的应用程序通过 Windows 终端（通过导航到项目根目录和运行ning npx vite dev）时，应用程序运行很好，我的浏览器可以连接到 localhost:3000.

但是，当我按下任一按钮时：

Run > Start Debugging，或
Run > Run Without Debugging

在Visual Studio代码中，它打开Chrome到localhost:3000，但我只看到localhost refused to connect。我认为 VS Code 实际上从来没有运行命令 npx vite dev，但我不知道如何更改它。

当我打开 .vscode/launch.json 时，我看到了这个：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            
        }
    ]
}

而且我不确定我应该在此处添加什么才能使其正常工作。任何帮助将不胜感激，如果这是一个有点愚蠢的问题，我很抱歉，但我无法为搜索 Google 或 SO.

提供任何帮助

编辑：

我几乎通过添加 preLaunchTask 来完成这项工作，但现在 chrome 在我开始调试时不再自动打开，所以我还不如运行 npm: dev 自己。

现在是.vscode/launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug with Chrome",
            "type": "pwa-chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "npm: dev"
        }
    ]
}

我认为这可能是因为 npm: dev 任务（实际上运行s npx vite dev）正在阻塞，并且只有在我按下停止按钮（或双击ctrl+c), 所以 chrome 没有打开，因为 VS Code 认为预启动任务仍然是运行ning.

如果有任何方法我可以告诉 VS Code 打开 Chrome 同时继续运行 npm: dev?

Answer 1

而不是运行 npm dev，而是运行 npm vite dev --open :)

如何在调试时将 VS Code 配置为运行 npx vite dev

How to configure VS Code to run npx vite dev when debugging

javascript

visual-studio-code

svelte

vscode-debugger

如何在调试时将 VS Code 配置为 运行 npx vite dev

How to configure VS Code to run npx vite dev when debugging

javascript

visual-studio-code

svelte

vscode-debugger

如何在调试时将 VS Code 配置为运行 npx vite dev