Debug vue-cli 3 generated app from Visual Studio Code

问题

I generated an app using vue-cli 3.0.0-rc.3

Now I want to debug it using Visual Studio Code (Debugger for Chrome) however I can't seem to find the option to turn on sourceMaps.

I set the breakpoint in VSCode but it is not hit. If I specify: "sourceMaps: true" in vue.config.js, I got an error "Invalid options in vue.config.js: "sourceMaps" is not allowed"

What option needs to be set for debugging to work?

回答1:

According to the Official cookbook these steps needs to be done:

vue.config.js file has to be edited and add:

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

then launch.json should look like this:

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

After these steps breakpoints started to work as expected.

回答2:

In addition to the above, I also had to follow the steps in this post: Visual Studio Code breakpoint appearing in wrong place

In particular, setting the sourceMapPathOverrides property. Finally got my breakpoints to work in Visual Studio Code using Vue.js. :)

来源：https://stackoverflow.com/questions/50977685/debug-vue-cli-3-generated-app-from-visual-studio-code