配置好node.JS环境并安装vue CLI，创建或打开项目后安装依赖，通过npm run serve启动开发服务器，再在vscode中配置launch.json文件，设置chrome或edge等浏览器调试，即可实现Vue项目调试，断点不生效时需检查配置、source map及浏览器插件。
VSCode运行本地Vue项目，简单来说，就是配置好环境，启动开发服务器，然后用VSCode的调试工具进行调试。下面具体展开说说。
解决方案
-
环境准备：Node.js 和 npm (或 yarn, pnpm)
这是基础，Vue项目依赖Node.js的包管理。 确保你已经安装了Node.js，npm通常会一起安装。 可以通过命令行检查：
立即学习“前端免费学习笔记（深入）”；
node -v npm -v
如果没安装，去Node.js官网下载安装包。 推荐安装LTS版本，比较稳定。
当然，你也可以选择yarn或pnpm作为包管理器，它们在性能上可能比npm更好一些。 安装方式也很简单：
npm install -g yarn npm install -g pnpm
-
安装 Vue CLI (如果还没有)
Vue CLI 是一个官方提供的脚手架工具，可以快速创建和管理Vue项目。 如果你已经有Vue项目，可以跳过这一步。
npm install -g @vue/cli # 或者使用 yarn yarn global add @vue/cli
-
创建或打开 Vue 项目
如果你要创建新项目：
vue create my-vue-project
按照提示选择预设，或者手动配置。 建议选择包含 Babel 和 ESLint 的预设，方便开发。
如果你已经有项目，直接用VSCode打开项目文件夹。
-
安装项目依赖
进入项目目录，安装依赖：
cd my-vue-project npm install # 或者使用 yarn yarn install # 或者使用 pnpm pnpm install
这一步会读取
package.json
文件，下载项目所需的所有依赖包。
-
启动开发服务器
在
package.json
文件中，通常会有一个
scripts
字段，里面定义了各种命令，比如
serve
、
build
等。 启动开发服务器的命令一般是
serve
或
dev
。
npm run serve # 或者使用 yarn yarn serve # 或者使用 pnpm pnpm run serve
启动后，会显示一个本地地址，比如
http://localhost:8080
。 在浏览器中打开这个地址，就能看到你的Vue项目了。
-
配置 VSCode 调试
在VSCode中，点击左侧的调试图标（一个虫子），然后点击齿轮图标，创建一个
launch.json
文件。 选择
Chrome: Launch
配置。
修改
launch.json
文件，配置调试地址：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", // 这里修改成你的开发服务器地址 "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }-
url
: 你的开发服务器地址。
-
webRoot
: 你的源代码根目录，通常是
src
文件夹。
-
sourceMapPathOverrides
: 这个配置很重要，它可以让调试器正确映射源代码，方便你打断点调试。
-
-
开始调试
保存
launch.json
文件，点击调试图标，选择
vuejs: chrome
配置，然后点击绿色的启动按钮。 VSCode会自动打开Chrome浏览器，并连接到你的开发服务器。
现在你可以在VSCode中打断点，调试你的Vue代码了。
VSCode调试Vue项目时断点不生效怎么办？
这确实是个常见问题，原因也比较多。 首先，确认你的
launch.json
文件配置正确，特别是
url
和
webRoot
。 其次，检查你的浏览器是否安装了Vue Devtools插件，有时候这个插件会干扰调试。 还有，确保你的代码已经编译成可调试的版本，比如开发环境下的代码。 如果使用了webpack等打包工具，需要配置source map，这样才能正确映射源代码。 最后，重启VSCode和Chrome浏览器，有时候也能解决问题。
如何在VSCode中调试Vue组件的template部分？
Vue组件的template部分，实际上是html代码，不能直接打断点调试。 但是，你可以通过在template中使用
debugger
语句，来触发调试器。 例如：
<template> <div> <p>{{ message }}</p> <button @click="handleClick">Click me</button> </div> </template> <script> export default { data() { return { message: 'Hello Vue!' }; }, methods: { handleClick() { debugger; // 这里打断点 this.message = 'Clicked!'; } } }; </script>
当点击按钮时，会触发
handleClick
方法，然后执行
debugger
语句，调试器就会暂停在这一行。 另外，Vue Devtools插件也提供了查看组件状态的功能，可以帮助你了解template中的数据绑定情况。
除了Chrome，VSCode还可以用其他浏览器调试Vue项目吗？
当然可以。 VSCode支持多种浏览器调试，比如Edge、firefox等。 你只需要在
launch.json
文件中修改
type
字段即可。 例如，使用edge浏览器：
{ "version": "0.2.0", "configurations": [ { "type": "edge", "request": "launch", "name": "vuejs: edge", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }
需要注意的是，不同浏览器的调试配置可能略有不同，你需要根据实际情况进行调整。 另外，确保你已经安装了对应浏览器的调试插件。 比如，Edge需要安装
插件。
