vue.js - Vue CLI V4 を使用した Vue 3 のデバッグ

Question

私は Vue 3 を使用しており、VS Code (Chrome Extension Debugger) を使用して標準の 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

必要な場合:

• ノードのバージョン: 15.11.0
• Vue-CLI バージョン: 4.5.11