vscode 中调试 vue

安装插件 Debugger for Chrome

Debugger for Chrome

在项目根目录 config/index.js 中修改

将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'
将 cacheBusting: true 修改为 cacheBusting: false
修改这两项是为了vscode中的断点能够正确定位到行

新增调试

在调试界面增加配置如下

lanuch.json

贴上代码

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome 调试",
      "url": "http://localhost:8080/login#/login?station=103",
      "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": false,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }
  ]
}

调试

此时在代码中无论是debugger, 还是小红点, 都能够直接进行调试了

调试