带有Vue.js的VS Code中Chrome的调试器设置

Question

在.vscode \ launch.json中具有以下设置

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
    ]
}

我可以在项目的index.js文件中设置一个断点，并且触发成功，但是* .vue文件中的断点触发不正确。

使用以下设置：

{
  "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}/*"
      }
    }
  ]
}

反之亦然，*。vue文件中的断点已成功触发，但是我无法在index.js文件中设置断点。

如何使断点在* .js和* .vue中都能工作？

查看有关如何设置环境的更多详细信息。

Answer 1

我很惊讶，但是添加两个版本的源地图覆盖对我来说很有效。现在，我可以在.vue文件，.js文件和导入的es6模块中的断点处进行设置并使其停止。我只花了大约一个月的时间就找到了解决方案！

希望它对您有用（这对我不再有用。请参见下文）

      "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/*",
          "webpack:///src/*": "${webRoot}/*"
      }

2019年10月更新：

在最近的更新中，调试js和vue文件对我来说都是无效的。我终于找到了适用于这两种情况的新设置：

      "sourceMapPathOverrides": {
         "webpack:///src/*.vue": "${webRoot}/*.vue",
         "webpack:///./src/*.js": "${webRoot}/*.js"
      }