我是VS Code和JavaScript的新手，我正在尝试使用Vite和Svelte制作一个简单的应用程序，但我有一个问题，我似乎无法解决。(我的代码目前只是一个新项目创建时给出的默认代码;我一点也没改。
当我通过Windows终端运行我的应用程序时(通过导航到项目根目录并运行npx vite dev)，应用程序运行良好，我的浏览器可以连接到localhost:3000。
但是，当我按
Run > Start Debugging或Run > Run Without Debugging
在Visual Studio Code中，它打开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}",
}
]
}
我不确定我应该在这里添加什么来让它工作。任何帮助都将是感激的，如果这是一个有点愚蠢的问题，对不起，但我不能资助任何帮助搜索谷歌或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任务(有效运行npx vite dev)是阻塞的，只有当我按下停止按钮(或双击ctrl+c)时才完成，所以chrome没有打开，因为VS Code认为预启动任务仍在运行。
如果有任何方法我可以告诉VS Code打开Chrome，同时继续运行npm: dev?
这是VSCode启动Vite Dev服务器的方法(npx Vite)，然后自动打开Chrome并将调试会话附加到它。
// 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",
"configurations": [
{
"name": "Launch Vite DEV server",
"request": "launch",
"runtimeExecutable": "npx",
"runtimeArgs": [
"vite",
],
"type": "node",
"serverReadyAction": {
"action": "debugWithChrome",
"pattern": "Local: http://localhost:([0-9]+)",
"uriFormat": "http://localhost:%s"
}
},
],
}
launch.json中可以自定义很多东西。我建议你阅读上面链接的文档。
"magic">serverReadyAction"设置动作">debugWithChrome"打开chrome.
,"模式;是一个正则表达式，用于捕获启动服务器的端口。
最后，在uriFormat"中为URL添加端口。通过使用%s。%s表示使用">模式的正则表达式完成的捕获">
不要让它运行npx vite dev(这是npm: dev任务)，让它运行npx vite dev --open:)
接受的答案对我不起作用(可能是因为我在vscode中进行远程开发)。
这是我的工作:
-
编辑的发射。
{ // 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", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}", "sourceMaps": true, "resolveSourceMapLocations": [ "${workspaceFolder}/**", "!**/node_modules/**" ], }, ] } -
编辑脚本"包"的元素。Json ' . Json '，这样' ';项目包含以下内容:
"dev": "vite --host --open", -
由于我在运行Rocky Linux的远程系统上进行开发，因此我必须从shell中执行以下操作(一次):
sudo firewall-cmd --permanent --add-port=5173/tcp然后重新启动远程系统(以确保端口实际上是打开的)
sudo shutdown -r now
在完成上述修改后，在嵌入式终端窗口中输入以下命令启动服务器:
yarn dev
这将启动开发服务器，它监听端口5173，并打开Chrome开发浏览器。
您可以关闭开发浏览器，然后通过单击"启动chrome"重新打开它。按钮，位于"运行"视图。
这解决了我的问题。我使用远程开发的一切，所以我需要一个本地Chrome开发浏览器连接(通过其特殊的VSCode端口)到远程服务器。
祝你好运!