如何配置VSCode以运行和调试Vue项目？

本文共计2538个文字，预计阅读时间需要11分钟。

在VSCode中打开一个Vue项目，本质上就是用VSCode打开你的项目文件夹。至于运行和调试，需要一些前置的环境配置，主要是确保你已安装Node.js。

解决方案

要在VSCode中顺利运行和调试Vue项目，我们得按部就班地来。首先，最基础的是Node.js环境，这是Vue项目运行的基石。你可以去Node.js官网下载安装，装好后，npm（Node Package Manager）或yarn也会随之安装。我个人比较喜欢用yarn，因为它在某些情况下会快一点，但npm也完全没问题。

接下来，如果你还没安装Vue CLI，那得全局安装一下。命令行里敲

npm install -g @vue/cli或者

yarn global add @vue/cli就行。Vue CLI能帮你快速搭建项目骨架，省去了很多手动配置的麻烦。

项目有了，环境也齐了，现在把项目文件夹拖到VSCode里，或者在项目根目录里打开终端，输入

code .，VSCode就会以当前目录作为工作区打开。

立即学习“前端免费学习笔记（深入）”；

运行项目非常直接，打开VSCode的集成终端（View -> Terminal，或者快捷键

Ctrl+

），然后进入你的项目目录，通常是执行npm run serve

（如果你用npm）或者yarn serve

（如果你用yarn）。这个命令会启动一个开发服务器，通常在https://www.php.cn/link/5b66ec8455908bc3618fd7642adab7a8。

调试就稍微复杂一点点，但一旦配置好，效率会大大提升。你需要安装一个VSCode扩展，比如“Debugger for Chrome”或者“Debugger for Edge”。