在 VS Code 中调试 Vue.js 损坏

Question

我正在 Visual Studio Code 中开发 Vue.js Web 应用程序 (Vue 2) 并使用 chrome 调试器扩展。我在几个月前按照这篇文章的建议设置了这个： visual-studio-code-breakpoint-appearing-in-wrong-place

一切都工作得很好，直到几天前推送了最新的 VS Code 更新（版本：1.47.0）。现在调试点出现在代码中的错误位置，就像之前链接的帖子一样。

在下面的示例 gif 中，调试器永远不会在我实际单击的断点处停止。断点跳转到第 40 行，这是调试时唯一实际中断的点。调试器永远不会停在第 142、147、150 行……只会停在第 40 行（我从未设置过）。

以下是.vscode/launch.json过去几个月一直有效的配置：

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

---

更新

我想知道我的工作流程中的某些内容（例如切换 git 分支）是否是造成问题的原因，但事实似乎并非如此。我已经在同一个 git 分支上工作了一周，无法在多个 .vue 文件中设置断点。

---

2021 年 11 月更新

我目前正在调试 Vue/Electron 应用程序。该应用程序加载一个没有组件的页面，我想调试稍后加载的组件。我注意到在初始加载之前设置的断点不起作用。但是，如果我在加载该组件后在该组件中设置断点，它似乎可以工作。

不确定这是否适用于所有 Vue 调试，或者是否特定于 Vue/Electron，但我想留下注释，以防出现模式。

Answer 1

新项目，使用Vue3 + Vite无缝调试！我使用VITE的推荐设置在 Vue3 中启动了一个新项目，并且在 VS 代码中调试时没有遇到任何问题。

对于仍然需要 Vue2 的项目来说，这不是最佳答案，因为配置选项有点不同（与 Volar 相比）。但我非常高兴能够在 VScode 中使用新的 Vue3 项目使用断点！

Vue3快速入门指南会自动使用 Vite 设置一个新项目。