vscode 使用vscode的断点调试来调试vue项目

launch.js文件(没有的话需要vscode断点调试功能创建一个launch.js文件)

 

点击该三角符号 ，在运行与调试栏中创建该文件 

 

 将如下代码覆盖创建的初始launch.js文件代码

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", //调试的环境
      "request": "launch", //调试模式：启动类型
      "name": "vue", // 自定义调试名称
      "url": "http://localhost:80", //调试的服务地址，需要和devServer对应
      "webRoot": "${workspaceFolder}/src", //调试的根路径为src业务目录下
      "breakOnLoad": true,
      "sourceMapPathOverrides": { //指定生成的sourceMap路径，参考浏览器生成的 .目录和src目录
        // "webpack:///src/*": "${webRoot}/*",
        // "webpack:///./src/*": "${webRoot}/*"
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        // "webpack:///./src/*": "${webRoot}/*", // 该行代码存在时，会出现vue文件断点定位错位的问题，但可正常使用js文件的断点调试
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "meteor:///app/*": "${webRoot}/*"
      }
    },
  ]
}

vue.config.js文件（只适用于vue-cli 3.x以上版本创建的项目）

configureWebpack: (config) => {
    config.devtool = 'source-map';
},
或
configureWebpack:{
    devtool:'source-map'
}

babel.config.js 

'env': {
    'development': {
      "sourceMaps": true, // 关键是这两行
      "retainLines": true, // 关键是这两行
    }
  }

配置完成后重启vscode，即可进行vue的断点调试