前置条件

在VSCode中安装Debugger for Chrome插件

实现步骤

在vue.config.js中加入configureWebpack

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

在VSCode中配置 launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:<your-port>",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

至此就可以在vscode中打断点debug了。

参考地址

• https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

环境及版本

vue-cli 版本

vue --version
@vue/cli 4.5.13

vue版本(package.json中)

"dependencies": {
    "vue": "^2.6.11",
}