cari

Rumah  >  Soal Jawab  >  teks badan

Vuejs - Titik putus tidak ditetapkan dalam VSCODE

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?

P粉308089080P粉308089080392 hari yang lalu815

membalas semua(2)saya akan balas

  • P粉648469285

    P粉6484692852023-11-03 13:25:02

    Cuba tukar parameter webRoot dan simpan kandungan dalam dokumen, anda perlu sertakan src selepas ${workspaceFolder}.

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

    Kemas kini: Selepas beberapa kajian, saya mendapati ini masalah. Terdapat perubahan dalam versi yang anda gunakan. Mereka menukar pengkompil dan ini menjejaskan cara penyahpepijat berkelakuan.

    Anda boleh menggunakan versi ini "2.6.11" berfungsi.

    Nota: Perubahan ini mempengaruhi keluaran berikutnya.

    balas
    0
  • P粉447495069

    P粉4474950692023-11-03 09:33:04

    Nampaknya terdapat beberapa masalah dengan pek web dalam versi vue 2.6.11 ke atas

    Git Central Theme

    Tema Reddit

    Selepas beberapa perbincangan dengan @Tonielton Mota, saya perasan bahawa jika saya mengalih keluar sepenuhnya nama sifat daripada package.json dan package-lock.json, ia berfungsi.

    Berikut ialah fail yang sedang berjalan:

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

    balas
    0
  • Batalbalas