使用 Vue CLI V4 调试 Vue 3答案

【问题标题】：Debugging Vue 3 with Vue CLI V4使用 Vue CLI V4 调试 Vue 3
【发布时间】：2021-06-12 14:16:46
【问题描述】：

我正在使用 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。在我看来，源地图似乎没有被构建。有人可以帮我解决这个问题吗？

Component to debug (components/Hello World.vue)

Debugged compiled app.js

如果有必要：

节点版本：15.11.0
Vue-CLI 版本：4.5.11

【问题讨论】：

标签： vue.js vue-cli vuejs3 vue-cli-4

【解决方案1】：

我也有同样的问题。我不确定在哪里报告它，但我发现的一种解决方法是添加“调试器”似乎可以工作，直到有修复。（我的 launch.json 和 vue 配置和你的一样。）

【讨论】：