在带有 Vue.js 项目的 Visual Studio Code 中错误触发断点答案

【问题标题】：Breakpoints are triggered incorrectly in Visual Studio Code with Vue.js project在带有 Vue.js 项目的 Visual Studio Code 中错误触发断点
【发布时间】：2018-09-22 21:00:02
【问题描述】：

我正在尝试设置 VS Code + Vue.js 来处理一些 Vue.js 项目。我already did some steps，但我无法使断点正常工作。

如果我开始网站

npm run dev

然后在VS Code中用Debugger for Chrome开始调试，并在.vue文件的某行代码上设置断点，该行正常用红圈标出，但是断点在代码中的不同 app.js 文件中触发，如下所示：

// module
exports.push([module.i...
// exports
/***/ }),

我的调试器设置有什么问题？

我的配置：

{
"version": "0.2.0",
"configurations": [
  {
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceRoot}"
  },
  {
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Chrome",
    "port": 9222,
    "webRoot": "${workspaceRoot}"
  }
]
}

devtool: 'source-map',

我的 vue-cli 版本是 vue@2.5.17。

【问题讨论】：

标签： vue.js visual-studio-code

【解决方案1】：

查看Vue.js cookbook：

Showing Source Code

在 config/index.js 中，添加：

devtool: 'source-map',

和

Launching the Application

您的 launch.config 应如下所示：

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

【讨论】：

【解决方案2】：

我在使用 Vue.js Cookbook 中的 Feetball 解决方案时遇到了问题 - 我很清楚它无法正常工作，因为断点会在错误的位置触发，并且调试器会打开错误的文件。

I've had better results with this debug configuration from the Microsoft vscode-recipes repository:

上面的链接有详细的说明，但我只是粘贴启动配置。说明与 Vue.js 食谱中的相同

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:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

这是它在计算属性中工作的结果（也适用于挂载等）：

【讨论】：