vue vscode debug调试

参考文章:vscode debug vue项目

1.项目中如果没有vue.config.js，则创建一个在vue.config.js文件中修改添加如下配置：

module.exports = {
    // 配置webpack
    configureWebpack: {
        devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : '',
    }
}

2.其次快捷键Ctrl + Shift + D 或点击调试， 没有则新建launch.json, 然后修改配置

 "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "针对 localhost 启动 Chrome",
            "url": " http://localhost:8080/",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/src/*"
            }
        }
    ]

其中url 可以替换成npm run serve 的url, 再者就是sourceMapPathOverrides的配置
3.最后配置好后，点击启动按钮，然后添加断点进行调试