我正在嘗試使用 vscode 來調試 vuejs，我已經嘗試了很多教程/答案，但無法使其工作。
所以我決定在這裡問一個問題，也許現在有一個正確的方法可以讓它發揮作用。
我創建了一個與我要偵錯的項目相同的項目，因此我可以在此處發布列印內容。
專案結構是：
這是未綁定的斷點：
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
configureWebpack: {
devtool: "source-map"
},
transpileDependencies: true
}
{
"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"
}
]
}
{
"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
}
}
]
}
{
"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
為什麼我的斷點沒有邊界？
嘗試更改 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」作品。
注意：此變更會影響後續版本。
看似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" ] }