从 Visual Studio Code 调试 vue-cli 3 生成的应用程序答案

【问题标题】：Debug vue-cli 3 generated app from Visual Studio Code从 Visual Studio Code 调试 vue-cli 3 生成的应用程序
【发布时间】：2018-12-01 07:50:01
【问题描述】：

我使用 vue-cli 3.0.0-rc.3 生成了一个应用

现在我想使用 Visual Studio Code（Chrome 的调试器）对其进行调试，但是我似乎找不到打开 sourceMaps 的选项。

我在 VSCode 中设置了断点，但没有命中。如果我在 vue.config.js 中指定：“sourceMaps: true”，则会出现错误“vue.config.js 中的选项无效：不允许使用“sourceMaps””

需要设置什么选项才能进行调试？

【问题讨论】：

在我上一个项目中使用 Vue 进行调试的最佳方式是 Vue devtools 的 chrome 扩展 chrome.google.com/webstore/detail/vuejs-devtools/…
也是 Vetur vscode 扩展非常有用的一个marketplace.visualstudio.com/items?itemName=octref.vetur
@EmileCantero：是的，vetur 和 devtools 很棒，我刚开始尝试使用它们

标签： vue.js vuejs2 vue-cli

【解决方案1】：

根据Official cookbook，需要完成这些步骤：

vue.config.js 文件需要编辑添加：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

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

在这些步骤之后，断点开始按预期工作。

【讨论】：

【解决方案2】：

除了上述之外，我还必须按照这篇文章中的步骤进行操作：Visual Studio Code breakpoint appearing in wrong place

特别是设置 sourceMapPathOverrides 属性。最后让我的断点使用 Vue.js 在 Visual Studio Code 中工作。 :)

【讨论】：