在vscode中调试vue项目（vue-cli创建）

一、[确保vscode安装了调试插件]([Deprecated] Debugger for Chrome - Visual Studio Marketplace)

二、在vue.config.js中配置

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

三、点击左侧栏的小虫子（如下图所示的小图标），然后点击运行与调试，选择Chrome环境，对生成的launch.json进行配置

{
  "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}/*"
      }
    }
}

然后就是对需要进行调试的代码处左边点一点，代码运行到相应的位置就会出现相应的调试了