Vuejs -在VSCODE中无法设置一些未绑定的断点
我试图用vscode来调试vuejs，我已经尝试了很多教程/答案，但都无法让它工作。
所以我决定在这里问一个问题，也许现在有一个正确的方法让它发挥作用。
我已经创建了一个项目，它与我想要调试的项目相同，所以我可以在这里发布打印。
项目结构是：
以下是未绑定断点：
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:\Users\vinic\Desktop\test\test\js\webpack:\test\src\components\HelloWorld.vue但该组件src实际上位于
C:\Users\vinic\Desktop\test\test\src\components\HelloWorld.vue为什么我的断点没有边界？
回答 2
Stack Overflow用户
发布于 2022-08-05 22:20:21
从表面上看，2.6.11以上版本的webpack版本存在一些问题。
在与@Tonielton进行了一些讨论之后，我注意到，如果我将属性名从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"
]
}Stack Overflow用户
发布于 2022-08-05 19:46:03
尝试更改${workspaceFolder}.参数并离开文档，您需要在webRoot之后包含src。
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}更新：经过一些研究，我发现了这个问题。在您使用的这个版本中有一个更改。他们改变了编译器，这影响了调试器的方式。
您可以在这个版本中使用"2.6.11"。
注意:此更改影响了以后的版本。
https://stackoverflow.com/questions/73211329
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号