vscode怎么调试 vue

在 VS Code 中调试 Vue 项目，可以使用以下步骤：

1. 在项目根目录下创建 `.vscode/launch.json` 文件，并添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

其中，`name` 是配置的名称，`type` 是调试类型，这里使用了 Chrome，`request` 是请求类型，这里使用了 `launch`，`url` 是要调试的网址，`webRoot` 是项目的根目录，`breakOnLoad` 表示在加载时暂停程序执行，`sourceMapPathOverrides` 表示调试时需要映射的路径。

2. 打开 VS Code 的调试面板，点击 `create a launch.json file`，选择 `Chrome`。

3. 运行项目，并在 Chrome 中打开调试工具。在调试面板中点击 `Start Debugging`，将会打开一个新的 Chrome 窗口，此时可以进行调试了。

4. 在 Chrome 调试工具中打开需要调试的页面，可以在 VS Code 的编辑器中设置断点，进行调试。

以上就是在 VS Code 中调试 Vue 项目的步骤。