VSCode怎么运行本地Vue_VSCode启动与调试本地Vue项目教程-VSCode-PHP中文网

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

絕刀狂花

发布： 2025-08-29 11:20:02

原创

667人浏览过

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

vscode怎么运行本地vue_vscode启动与调试本地vue项目教程

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
```
登录后复制
文件，下载项目所需的所有依赖包。

白瓜面试
白瓜面试 - AI面试助手,辅助笔试面试神器

40

查看详情
启动开发服务器

在
```
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需要安装