VSCode怎么运行本地Vue_VSCode启动与调试本地Vue项目教程

配置好Node.js环境并安装Vue CLI，创建或打开项目后安装依赖，通过npm run serve启动开发服务器，再在VSCode中配置launch.json文件，设置Chrome或Edge等浏览器调试，即可实现Vue项目调试，断点不生效时需检查配置、source map及浏览器插件。

VSCode运行本地Vue项目，简单来说，就是配置好环境，启动开发服务器，然后用VSCode的调试工具进行调试。下面具体展开说说。

解决方案

1. 环境准备：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

2. 安装 Vue CLI (如果还没有)

   Vue CLI 是一个官方提供的脚手架工具，可以快速创建和管理Vue项目。 如果你已经有Vue项目，可以跳过这一步。

   npm install -g @vue/cli
   # 或者使用 yarn
   yarn global add @vue/cli

3. 创建或打开 Vue 项目

   如果你要创建新项目：

   vue create my-vue-project

   按照提示选择预设，或者手动配置。 建议选择包含 Babel 和 ESLint 的预设，方便开发。

   如果你已经有项目，直接用VSCode打开项目文件夹。

4. 安装项目依赖

   进入项目目录，安装依赖：

   cd my-vue-project
   npm install
   # 或者使用 yarn
   yarn install
   # 或者使用 pnpm
   pnpm install

   这一步会读取

   package.json

   文件，下载项目所需的所有依赖包。
   

   企奶奶

   一款专注于企业信息查询的智能大模型，企奶奶查企业，像聊天一样简单。

   下载

5. 启动开发服务器

   在

   package.json

   文件中，通常会有一个

   scripts

   字段，里面定义了各种命令，比如

   serve

   、

   build

   等。 启动开发服务器的命令一般是

   serve

   或

   dev

   。

   npm run serve
   # 或者使用 yarn
   yarn serve
   # 或者使用 pnpm
   pnpm run serve

   启动后，会显示一个本地地址，比如

   http://localhost:8080

   。 在浏览器中打开这个地址，就能看到你的Vue项目了。

6. 配置 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

     : 这个配置很重要，它可以让调试器正确映射源代码，方便你打断点调试。

7. 开始调试

   保存

   launch.json

   文件，点击调试图标，选择

   vuejs: chrome

   配置，然后点击绿色的启动按钮。 VSCode会自动打开Chrome浏览器，并连接到你的开发服务器。

   现在你可以在VSCode中打断点，调试你的Vue代码了。

VSCode调试Vue项目时断点不生效怎么办？

这确实是个常见问题，原因也比较多。 首先，确认你的

launch.json

url

webRoot

如何在VSCode中调试Vue组件的template部分？

Vue组件的template部分，实际上是HTML代码，不能直接打断点调试。 但是，你可以通过在template中使用

debugger

当点击按钮时，会触发

handleClick

debugger

除了Chrome，VSCode还可以用其他浏览器调试Vue项目吗？

当然可以。 VSCode支持多种浏览器调试，比如Edge、Firefox等。 你只需要在

launch.json

type

{
    "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