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: /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的断点调试
