配置好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 -vnpm -v
如果没安装，去Node.js官网下载安装包。 推荐安装LTS版本，比较稳定。
当然，你也可以选择yarn或pnpm作为包管理器，它们在性能上可能比npm更好一些。 安装方式也很简单：
npm install -g yarnnpm install -g pnpm
安装 Vue CLI (如果还没有)
Vue CLI 是一个官方提供的脚手架工具，可以快速创建和管理Vue项目。 如果你已经有Vue项目，可以跳过这一步。
npm install -g @vue/cli# 或者使用 yarnyarn global add @vue/cli
创建或打开 Vue 项目
如果你要创建新项目：
vue create my-vue-project
按照提示选择预设，或者手动配置。 建议选择包含 Babel 和 ESLint 的预设，方便开发。
如果你已经有项目，直接用VSCode打开项目文件夹。
安装项目依赖
进入项目目录，安装依赖：
cd my-vue-projectnpm install# 或者使用 yarnyarn install# 或者使用 pnpmpnpm install
这一步会读取
package.json
文件，下载项目所需的所有依赖包。
启动开发服务器
在
package.json
文件中，通常会有一个
scripts
字段，里面定义了各种命令，比如
serve
、
build
等。 启动开发服务器的命令一般是
serve
或
dev
。
npm run serve# 或者使用 yarnyarn serve# 或者使用 pnpmpnpm 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
语句，来触发调试器。 例如：
export default { data() { return { message: 'Hello Vue!' }; }, methods: { handleClick() { debugger; // 这里打断点 this.message = 'Clicked!'; } }};{{ message }}
当点击按钮时，会触发
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需要安装
Debugger for Microsoft Edge
插件。
以上就是VSCode怎么运行本地Vue_VSCode启动与调试本地Vue项目教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/17591.html
微信扫一扫 
支付宝扫一扫 
