时间戳

首页 > 解决方案 > 调试 vue-cli 项目 - 没有断点，控制台链接到错误的文件

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

问题描述

尝试设置 vscode 来调试 vue 项目。

我使用vue ui它是因为它实际上超级方便。

我有两个问题：

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

我已阅读此页面：
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}/*"
            }
        }
    ]
}

标签： debuggingvisual-studio-codegoogle-chrome-devtoolsvue-cli-3

解决方案

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

如果您使用 Vue CLI 3，请设置或更新devtool里面的属性 vue.config.js：

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

我从问题中链接的页面中获得了解决方案的线索：尽管webpack确实隐式生成了某种源映射，但食谱明确提到必须将 webpack 配置为生成源映射。否则，它似乎无法以使一切正常运行所需的任何方式正确执行。

如果其他人偶然发现这个奇怪的东西（有源地图，但不是正确的），我会把它留给后代。

推荐阅读