vscode调试vue

//第一步：在扩展商店搜索debugger for chrome 进行安装
//第二步：在launch.json 文件进行配置
{
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8081",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
注：url的端口号是npm run serve 的端口号
//第三步：vue-cli3创建的项目
//在vue.config.js 配置
//函数写法
configureWebpack: (config) => {
 config.devtool = 'source-map'
}
//对象写法
configureWebpack:{
   devtool: 'source-map'
}
// 如果你使用的是 Vue CLI 2，请设置并更新 config/index.js 内的 devtool property：

devtool: 'source-map',

第四步：启动项目 npm run serve
第五步：开始调试 快捷键 F5

在vscode打断点，运行程序就会进入到断点;
 .vue文件上打断点！！！

vuejs vscode调试文档地址：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html