vue.js - 使用 Vue CLI V4 调试 Vue 3

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

我正在使用 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。对我来说,源 map 似乎没有被构建。有人可以帮我解决这个问题吗?
Component to debug (components/Hello World.vue)
Debugged compiled app.js
如果有必要:
  • 节点版本:15.11.0
  • Vue-CLI 版本:4.5.11
  • 最佳答案

    我有同样的问题。我不确定在哪里报告它,但我发现的一个解决方法是添加“调试器”似乎可以工作,直到有一个修复。 (我的 launch.json 和 vue 配置和你的一样。)
    enter image description here

    关于vue.js - 使用 Vue CLI V4 调试 Vue 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66635882/

    相关文章:

    debugging - 调试 Vue.js SPA 的最佳方式是什么

    vue.js - Vue-cli3 vue-cli-service build --modern 不起作用

    typescript - 将 Prop 传递到设置 : Property 'user' does not exist on type 时,VueJS 3 Composition API 和 TypeScript 类型问题

    javascript - 如何在 Vue 组件事件中触发 Apollo 查询?

    vue.js - 如何在 Vue 3 中获取数据?

    javascript - 如何在可编辑组件(vue)中的复制/粘贴操作中过滤文本内容

    typescript - Vue CLI 的类型检查服务忽略内存限制

    javascript - vue-cli项目修改端口号的方法

    vue.js - 如何在 vue3 设置中强制更新?

    vue.js - vue add i18n 在使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,该错误是什么意思以及如何调试?