调试 vue-cli 项目 - 没有断点，控制台链接到错误的文件

Question

正在尝试设置 vscode 以调试 vue 项目。

我用vue ui因为真的超级方便

我有两个问题：

1. 断点结束 Breakpoint set but not yet bound。显然不起作用。
2. 调试控制台中的文件链接打开 src\node_modules\cache-loader\dist\webpack:...。这甚至不是一个有效的路径 - src.
中没有 node_modules

我已阅读此页：
https://vuejs.org/v2/cookbook/debugging-in-vscode.html

我的大部分启动配置都是从那里获得的。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "vuejs/chrome: Attach to devtools",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "urlFilter": "http://localhost:8080/*",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

Answer 1

今天通过更多的实验找到了答案。

If you use Vue CLI 3, set or update the devtool property inside vue.config.js:

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

我从问题中链接的页面获得了解决方案的线索：虽然 webpack 确实隐式生成了某种源映射，但说明书明确提到必须配置 webpack 才能生成源映射。否则，它似乎无法以正确获取所有内容所需的任何方式正确地做到这一点 运行。

留给子孙后代，以防其他人偶然发现这个奇怪的东西（有源地图，但不是正确的）。