Javascript 调试时如何配置VS Code运行npx vite dev

我不熟悉VS代码和JavaScript，我正在try 使用Vite和Svelte制作一个简单的应用程序，但我有一个问题似乎无法解决.(我的代码目前只是创建新项目时给出的默认代码；我根本没有更改它.)

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

然而，当我按下任一按钮时:

• Run > Start Debugging，或者
• Run > Run Without Debugging

在VisualStudio代码中，它将Chrome打开到localhost:3000，但我只看到localhost refused to connect.我认为VS代码从来没有真正运行过命令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}",
            
        }
    ]
}

我不确定我应该在这里添加什么来让它发挥作用.任何帮助都将不胜感激，如果这是一个有点愚蠢的问题，我很抱歉，但我无法资助任何帮助搜索谷歌左右.

EDIT:

通过添加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任务(实际上运行npx vite dev)正在阻塞，只有在我按下停止按钮(或双击ctrl+c)时才会完成，所以chrome没有打开，因为VS代码认为启动前任务仍在运行.

如果有什么方法可以让VS代码在继续运行npm: dev的同时打开Chrome？