从 Visual Studio 代码调试 vue-cli 3 生成的应用程序

Question

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

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

我在 VSCode 中设置了断点，但没有命中。如果我指定："sourceMaps: true" in vue.config.js，我得到一个错误 "Invalid options in vue.config.js: "sourceMaps" is not allowed"

调试需要设置什么选项？

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

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

Answer 2

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

特别是设置 sourceMapPathOverrides 属性。终于让我的断点在使用 Vue.js 的 Visual Studio 代码中工作。 :)

从 Visual Studio 代码调试 vue-cli 3 生成的应用程序

Debug vue-cli 3 generated app from Visual Studio Code

vue.js

vuejs2

vue-cli