1、vscode 打开 vue 项目

2、terminal窗口执行 npm run dev 或 npm run serve

具体命令需查看 package.json,scripts字段的值
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  
执行后输出信息:
 DONE  Compiled successfully in 11498ms                       14:59:38


  App running at:
  - Local:   http://localhost:8080 
  - Network: http://192.168.120.11:8080

  Note that the development build is not optimized.
  To create a production build, run npm run build.
  
3、点击侧边栏“Run and Debug”,创建 launch.json,内容如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",            // 与步骤2的输出相同
            "webRoot": "${workspaceFolder}/src",       
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

4、vue.config.js文件添加配置项

module.exports = {
  configureWebpack: {
        devtool: 'source-map'
    }
}

5、terminal窗口Ctrl+C停止步骤2的运行,再次运行 npm run serve

6、在项目的 js 或 vue 文件中设置断点,F5 即可启动调试

如不能命中断点,可在目标行之前添加 debugger; 语句

更多推荐