vscode调试vue2时断点不匹配?

Question

vscode调试vue2时打断点发现实际断点出现在其他行。

我在index.vue中打断点,给137行打断点，结果实际断点出现在了41行
我的launchu.json配置：

{
    "configurations": [
      {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:8888",
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}"
      }
    ]
  }

vue.config.js中也配置了devtool:'source-map'

configureWebpack: {
    devtool: 'source-map'
  }

Answer 1

Vue2 项目的 launch.json 需要配一下这样的配置：

"sourceMapPathOverrides": {
    "webpack:///src/*": "${workspaceFolder}/src/*"
}

或者

"sourceMapPathOverrides": {
    "webpack://项目名称/src/*": "${workspaceFolder}/src/*"
}

目的是为了让打断点的文件路径和 sourcemap 之后的文件路径对上。

具体怎么配，你可以加个 debugger 看看 Chrome DevTools 里是啥路径，然后映射到本地的路径就行。

了解一下 断点映射的原理 就能明白了。