vscode调试vue项目设置

最新推荐文章于 2025-06-07 09:06:49 发布

原创最新推荐文章于 2025-06-07 09:06:49 发布 · 1.3w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

13 篇文章

订阅专栏

本文详细介绍如何在VSCode中调试Vue项目，包括安装调试插件、配置launch.json文件及运行调试过程。通过F5断点调试，实现类似VS的调试体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vscode如何调试vue项目，通过F5进行断点调试，类似与vs进行调试，vscode需要安装插件以及配置launch.json文件。

步骤一：

1.找到“扩展”或者按快捷键“Ctrl+Shift+X”，如下图，输入Debugger for Chrome查找，并安装。

2.项目里创建“launch.json”文件，内容如下(关键是json配置)：

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}"
},
{
"name": ".NET Core Launch (console)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceFolder}/bin/Debug/<insert-target-framework-here>/<insert-project-name-here>.dll",
"args": [],
"cwd": "${workspaceFolder}",
"console": "internalConsole",
"stopAtEntry": false,
"internalConsoleOptions": "openOnSessionStart"
}
]
}
3.在“package.json”文件里的"scripts"中添加："serve": "vue-cli-service serve" 。如下图：

"scripts": {
    "serve": "vue-cli-service serve",

4.按“Ctrl+Shift+Y” 调出终端，输入：npm run dev

访问地址：http://localhost:8080

5.找到“Ctrl+Shift+D”，点击绿色按钮开始调试，会弹出google浏览器访问网站，在你想要的地方添加断点，如下图：