Saya cuba nyahpepijat vuejs menggunakan vscode, saya telah mencuba banyak tutorial/jawapan tetapi tidak dapat berfungsi.

Jadi saya memutuskan untuk bertanya soalan di sini, mungkin ada cara yang betul untuk menjadikannya berfungsi sekarang.

Saya mencipta projek yang serupa dengan projek yang ingin saya nyahpepijat supaya saya boleh menyiarkan cetakan di sini.

Struktur projek ialah:

Ini ialah titik putus yang tidak terikat:

Tab Sumber dalam Chrome kelihatan seperti ini:

Tab sumber Chrome yang lebih terperinci:

vue.config.js:

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  transpileDependencies: true
}

launch.json:

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

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "vuejs: start",
        "type": "npm",
        "script": "serve",
        "isBackground": true,
        "problemMatcher": [{
            "base": "$tsc-watch",
            "background": {
                "activeOnStart": true,
                "beginsPattern": "Starting development server",
                "endsPattern": "Compiled successfully"
            }
        }],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
    ]
}

pakej.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Dikemas kini

@A.D bertanya kepada saya sama ada saya cuba menggunakan kata kunci

debugger;

Keputusan adalah seperti berikut: Ps: Saya tidak mahu mula menulis penyahpepijat dalam kod saya...

Tetapi saya dapat melihat fail penyahpepijat menunjuk ke:

C:UsersvinicDesktoptesttestjswebpack:testsrccomponentsHelloWorld.vue

Tetapi komponen src sebenarnya terletak

C:UsersvinicDesktoptesttestsrccomponentsHelloWorld.vue

Mengapa titik putus saya tiada sempadan?