1. 项目根目录下 mkdir .vscode
2. cd .vscode
3. touch launch.json
4. launch.json 配置

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launchchrome",
      "request": "launch",
      "type": "chrome", //打开的浏览器 chrome  , msedge
      "url": "http://localhost:8899", // 本项目的启动地址
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

5. 先运行本地项目
6. 打开 vscode，点击调试按钮，即可在新开的浏览器断点调试前端项目 注意：切记，要用 debug 这里启动后弹出的浏览器窗口进行操作调试，这是个单独的浏览器窗口
7. vue.config.js 文件中，这一步不是必须，添加如下配置:

configureWebpack: {
  devtool: process.env.NODE_ENV !== "production" ? "source-map" : '',
}