从Visual Studio Code调试vue-cli 3生成的应用

Question

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

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

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

需要设置什么选项才能使调试工作？

Answer 1

根据官方食谱，这些步骤需要完成：

必须编辑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}/*"
      }
    }
  ]
}

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