设置VSCode以调试Django应用程序中的Vue

我正在努力调试作为django项目一部分的Vuejs代码（带有断点）。Django调试工作得很好，但我不知道如何设置Vue部件。我在网上遵循了几个方法，但它们都假设一个纯Vue应用程序和/或位于项目根目录的Vue应用程序。我都试过了，但我都没试过，甚至都没试过在浏览器中打开一个页面进行调试，更不用说触发断点了

项目的设置如下所示：

.
├── django_app
│   ├── *
│   ├── migrations
│   ├── static
│   ├── templates
│   ├── templatetags
│   ├── tests
│   └── views
├── staticfiles
│   ├── assets
│   ├── css
│   ├── *
│   ├── js
│   └── vue
│        ├── css
│        └── js
│  
└── vue
    ├── node_modules
    ├── src
    │    ├── AppPage1
    │    │      ├── AppPage1.vue
    │    │      └── main.js
    │    ├── AppPage2
    │    │      ├── AppPage2.vue
    │    │      └── main.js
    ├── package.json
    └── vue.config.js

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome/Vue Debug",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
              "webpack:/*": "${webRoot}/*",
              "/./*": "${webRoot}/*",
              "/src/*": "${webRoot}/*",
              "/*": "*",
              "/./~/*": "${webRoot}/node_modules/*"
            },
            "preLaunchTask": "vuejs: start"
        },
    ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "vuejs: start",
        "type": "npm",
        "script": "serve",
        "isBackground": true,
        "options": {
          "cwd": "${workspaceFolder}/vue"
        },
      },
    ]
  }

任何指向正确方向的指示都将不胜感激