使用Vue CLI V4调试Vue 3

Question

我正在使用Vue 3，希望使用VS Code（Chrome扩展调试器）调试标准的Vue演示。我的vue.config.js文件如下：

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

这是我的 launch.json 设置：

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

当我启动调试器时，我只能调试编译后的app.js而不能调试HelloWorld.vue。在我看来，似乎源代码映射没有被构建。有人能帮助解决这个问题吗？ 需要进行调试的组件(components/Hello World.vue) 已经调试过的编译后的app.js 如果需要的话：

- Node版本：15.11.0 - Vue-CLI版本：4.5.11

- MASC

Answer 1

我遇到了同样的问题。不确定应该在哪里报告，但我找到了一个解决方法，添加 "debugger" 似乎可以在修复之前解决问题。（我的 launch.json 和 vue config 与你的相同。）

- avenmia