# vue_project_study

**Repository Path**: bllose/vue_project_study

## Basic Information

- **Project Name**: vue_project_study
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-15
- **Last Updated**: 2025-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_project_study

### 待解决问题  
**问题：如何对vue3项目进行debug**     

**现状：目前在IDE中打的断点无效。只能通过浏览器的Sources下的Page找到加载的文件打断点。但是文件是经过编译的，与源文件并不一致，需要找到具体位置进行调试，有时候甚至找不到代码位置。**      

**DEBUG目标: 在IDE中打断点，调试ts文件和vue文件中script部分**  

| IDE断点失效 | 浏览器断点测试 |  
| --- | --- |  
| ![输入图片说明](resources/pics/Can_not_debug_in_IDE_compressed.gif) | ![输入图片说明](resources/pics/Debug_In_Chrome_compressed.gif) |

#### 尝试方法  
- Toggle Auto Attach ==> always/smart  
- remote debug port 9222 + attach port 9222  

##### launch.json  
``` json
{
    "name": "Vue Chrome Debug",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}/src",
    "breakOnLoad": true,
    "sourceMaps": true
}
```   
首先 `npm run dev`启动项目，然后启动`Vue Chrome Debug`， 这个方法的基础是 `vite` 构建，与当前的 `vue-cli-service` 构建场景可能不同。  
当前实测无效。