在 vs 代码中调试 node/prime vue webapp 没有达到断点

Question

我有一个想要调试的 node/prime vue 应用程序。 在 launch.json 我有

"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }

我在 VS Code 中使用 npm run serve 启动我的应用程序

然后我点击上面配置的调试/播放图标。

当我在应用程序中遇到错误时，控制台错误会出现在 VS Code 的调试控制台中。

但是没有命中断点。在 .ts 、 .js 和 .vue 文件中都没有。它们都显示为“未绑定断点”

我已经安装了 Debugger for Chrome 到 VS Code 和 Vetur Vue 工具

我也跟着这个链接https://vuejs.org/v2/cookbook/debugging-in-vscode.html 放了

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

进入 vue.config.js

=> 如何绑定断点？

Answer 1

添加

configureWebpack: {
    devtool: 'source-map'
}

到 vue.config.js

在 Chrome 中设置断点会有所不同。