1. 配置 vue.config.js
加上 devtool: 'source-map' //开发环境可以加，生产环境，别人可以看到源代码，不完全不要加
2.添加 launch.json
vscode打开调试窗口，在下图箭头指向的位置点击打开配置文件 launch.json：
3.配置远程调试
1）浏览器快捷方式设置
浏览器桌面快捷方式对应图标，右键属性，找到“快捷方式”选项卡->下的目标，在 "C:\Program Files\Google\Chrome\Application\chrome.exe" 后添加 -remote-debugging-port=9222 变更为："C:\Program Files\Google\Chrome\Application\chrome.exe" -remote-debugging-port=9222
2） launch.json 配置
选择后会自动添加如下内容：
{ "name": "Attach to Chrome", "port": 9222, "request": "attach", "type": "chrome", "webRoot": "${workspaceFolder}" }
这里的9222对应的就是步骤（1）中在快捷方式中添加的 9222 端口。
3）9222端口号的进程
通过快捷方式启动chrome浏览器，然后在cmd中输入 netstat -ano | findstr 9222 会看到对应9222端口号的进程，如下：
在任务管理器中也可以得到确认，如下：
4）在vscode中启动调试
4.直接调试
1） launch.json 配置
选择后会自动添加如下内容：
{ "name": "Launch Edge", "request": "launch", "type": "msedge", "url": "http://localhost:8080",//项目启动地址 "webRoot": "${workspaceFolder}/", "sourceMapPathOverrides": { //映射到本地项目配置 "webpack://webui/*": "${webRoot}/*", }, },
sourceMapPathOverrides配置：
标签：vue,launch,vscode,chrome,快捷方式,9222,调试
From： https://www.cnblogs.com/yyl001/p/17326339.html