Tl;dr
VS Code 调试器总是说，Unbound breakpoint但在 chrome 开发工具中设置断点可以工作，并自动在 VS Code 中打开相关文件（之后该文件的 VS Code 调试器可以工作）。Chrome 中的源（地图）文件也有奇怪的名称，例如HelloWorld.vue?4a7c.
我使用 Typescript 设置了一个新的 VueJS 3 项目vue create my_project。我选择了 Typescript、Babel 和 Vue 版本 3。
我正在尝试启动并运行 VS Code 调试器来调试我的项目，就像我在 Java 等其他项目中使用的方式一样。因此，我从 VS Code 配方方面复制了最佳实践。（由于没有 VueJS Typescript 调试配方，我使用了 VueJS 和 Typescript 的调试配方并尝试将它们混合）
实际问题是，当我在 VS Code 中设置断点时，它显示Unbound breakpoint. 我的假设是 VS Code 无法将任何源映射文件映射到我的源文件，这表明 webpack 以某种方式弄乱了文件命名或者我的文件映射配置错误。
到目前为止，我所做的工作是，当我使用 chrome 开发人员工具检查项目时，我会看到一个main.ts可以设置断点的位置，一旦断点被击中，文件就会在 VS Code 中打开，并且调试器（至少对于这个特定文件）可以工作正如预期的那样。当涉及到.vue文件时，事情就有点混乱了。在 chrome 中，.vue文件被混淆/编译，但有一些文件以以下方式命名[file-name].vue?[4-digit-hex-value]（例如HelloWorld.vue?4a7c），其中包含实际源代码并在其中设置断点，并且该文件将在 …