VScode调试Vue

百度了许久发现大部分都配置都太老旧，故记录一下，其他也不难。vscode的chrome debug已经给出了说明

https://github.com/Microsoft/vscode-recipes/blob/master/vuejs-cli/README.md

先按找正常流程走一遍，安装chrome debug 创建调试配置文件

launch.json  

 "version": "0.  "configurations": [

    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}
然后改vueweback配置
Vue Cli 2.X 到 config/index.js找到devtool 
改成

devtool: 'source-map'

运行npm run dev 重新编译就行了

Vue Cli 3.X 安装官方说明配就行了

注意！！！

launch.json  中的localhost:xxxx,要和webback中的端口一致，vue默认为8080；