Vuejs - VSCODE 中未設定斷點

Question

我正在嘗試使用 vscode 來調試 vuejs，我已經嘗試了很多教程/答案，但無法使其工作。

所以我決定在這裡問一個問題，也許現在有一個正確的方法可以讓它發揮作用。

我創建了一個與我要偵錯的項目相同的項目，因此我可以在此處發布列印內容。

專案結構是：

這是未綁定的斷點：

Chrome 中的「來源」標籤如下所示：

更詳細的 Chrome 來源標籤：

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
        }
    }
    ]
}

package.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"
  ]
}

更新

@A.D 詢問我是否嘗試過使用關鍵字

debugger;

結果如下： Ps：我不想開始在我的程式碼中編寫調試器......

但是我可以看到偵錯器檔案指向：

C:UsersvinicDesktoptesttestjswebpack:testsrccomponentsHelloWorld.vue

但是元件src其實位於

C:UsersvinicDesktoptesttestsrccomponentsHelloWorld.vue

為什麼我的斷點沒有邊界？

Answer 1

嘗試更改 webRoot 參數並保留文件中的內容，您需要在 ${workspaceFolder} 之後包含 src。

{
  "type": "chrome",
  "request": "launch",
  "name": "vuejs: chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}/src",
  "breakOnLoad": true,
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

更新： 經過一番研究，我發現了這個問題。 您使用的這個版本有一個變化。 他們更改了編譯器，這影響了調試器的方式。

您可以使用此版本中的「2.6.11」作品。

注意：此變更會影響後續版本。

Answer 2

看似vue 2.6.11以上版本的webpack存在一些問題

Git 中心主題

#Reddit 主題

#與 @Tonielton Mota 進行一些討論後，我注意到，如果我從 package.json 和 package-lock.json 中完全刪除屬性名稱，它就可以工作。

以下是正在運行的檔案：

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*",
            },
            "preLaunchTask": "vuejs: start"
          }
    ]
}

package.json

{
  "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"
  ]
}