Vue Cli3 + VS Code 愉快调试

1. 设置vue.config.js以便能够准确命中断点

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

2. 打开调试配置文件launch.json, 添加或修改以下配置：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "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}/*"
      }
    }
  ]
}

3. 在终端运行程序，yarn serve, npm run serve,或者在vue-ui中启动均可

4. 点击debug绿色小三角，或者F5启动调试