vscode debug vue项目
时间: 2025-02-02 20:56:05 浏览: 36
### 设置和使用 VSCode 调试 Vue 项目
#### 配置 `vue.config.js`
对于采用 Vue CLI 3 构建的项目,通过修改 `vue.config.js` 文件来增强调试体验。具体来说,在该文件内添加或调整如下配置:
```javascript
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
```
此设置确保生成详细的源码映射信息,有助于更精确地追踪代码执行路径[^1]。
#### 编辑 `launch.json`
为了使 Visual Studio Code (VSCode) 支持对前端应用的有效调试,需创建或编辑 `.vscode/launch.json` 文件。一个典型的配置项可能看起来像这样:
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080", // 根据实际情况更改端口号
"webRoot": "${workspaceFolder}/src"
}
]
}
```
上述 JSON 片段定义了一种名为 “vuejs: chrome” 的调试模式,它会在启动时自动打开指定 URL 并加载对应的 Web 应用程序。
#### 启动调试过程
完成以上准备工作之后,可以通过按下键盘上的 F5 键或是点击位于左侧边栏顶部附近的绿色箭头图标来触发调试流程。此时浏览器将会被唤起,并访问本地服务器地址(通常是类似于 `http://localhost:5173` 这样的链接),同时允许开发者利用断点等功能深入探究应用程序的行为逻辑[^2]。
当选择了之前在 `launch.json` 中设定好的配置名称——即这里的 `"vuejs: chrome"` ——再点击那个显眼的大号绿三角形按钮后,则可以顺利开启一次完整的 Chrome 浏览器实例用于测试目的[^3]。
阅读全文
相关推荐


















