简介本教程将使用一个全新的Vue.js项目作为模板进行配置。您可以按照教程一步一步来,也可以按照教程将配置添加到现有项目中。仓库地址:https://github.com/mrlmx/debug-vuejs-project-with-vscode创建项目通过vue提供的create-vue脚手架创建一个vue3项目。npminitvue@latest注意:通过上面的命令,创建的是一个基于vite的项目,而不是基于webpack的项目。然后在VSCode中打开创建好的项目:code./debug-vuejs-project-with-vscodecode是VSCode自带的命令。如果运行的时候提示没有这个命令,可以看到这里设置一下。debug-vuejs-project-with-vscode是我的项目名称。生成sourcemap文件如果vite是通过create-vue创建的项目,在开发环境中修改vite.config.ts配置文件生成sourcemap文件。exportdefaultdefineConfig({build:{sourcemap:true,},//其他配置...});更多配置请参考:https://vitejs.dev/config/build-options.html#build-sourcemapVue如果cli是通过vue-cli创建的项目,修改vue.config.js配置文件,生成一个开发环境中的sourcemap文件。module.exports={configureWebpack:{devtool:"source-map"}//其他配置...};更多配置请参考:https://cli.vuejs.org/guide/webpack.html如果webpack是自己构建的项目,修改自己定义的webpack配置文件,在开发环境生成sourcemap文件.module.exports={devtool:"source-map",//其他配置...};更多配置请参考:https://webpack.js.org/configuration/devtool/#devtool配置文件launch.json通过以下步骤,创建一个launch.json配置文件(如果你的项目中已经存在该文件,可以跳过这一步)选择左侧菜单中的调试图标,打开调试菜单。单击createalaunch.jsonfile创建一个新的配置文件。选择WebApp(Edge),当然你也可以选择WebApp(Chrome)生成的launch.json文件,大致是这样的(不同版本的VSCode可能略有不同):{//使用IntelliSense了解一下可能的属性。//悬停以查看现有属性的描述。//更多信息,请访问:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"pwa-msedge","request":"launch","name":"LaunchEdgeagainstlocalhost","url":"http://localhost:8080","webRoot":"${workspaceFolder}"}]}替换内容生成的launch.json文件配置如下:{"version":"0.2.0","configurations":[{//使用Edge浏览器调试"type":"msedge",//使用Chrome浏览器调试//“类型”:“铬”,“请求”:"launch","name":"vuejs:msedge",//项目的访问地址(需要改成你项目开发环境对应的地址和端口号)"url":"http://localhost:5173","webRoot":"${workspaceFolder}","pathMapping":{"/_karma_webpack_":"${workspaceFolder}"},"sourceMapPathOverrides":{"webpack:/*":"${webRoot}/*","/./*":"${webRoot}/*","/src/*":"${webRoot}/*","/*":"*","/./~/*":"${webRoot}/node_modules/*"},//设置进入调试环境前需要执行的任务//这个名字对应.vscode中tasks.json文件中的label属性项目目录)"preLaunchTask":"vuejs:start"}]}在上面的配置中,需要注意以下几点:type:VSCode的调试类型。msedge表示使用Edge浏览器进行调试。chrome表示使用Chrome浏览器进行调试。url:浏览器启动时访问的地址。需要改成你项目的开发环境地址。如果一致,则无需修改。preLaunchTask:设置进入调试环境前需要执行的任务。该名称对应项目.vscode目录下tasks.json文件中的label属性。下面将创建tasks.json文件。更多信息:launch.json文件的更多配置请参考:https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributestasks.json在.vscode目录下创建tasks.json文件项目,然后将以下内容粘贴到其中:{"version":"2.0.0","tasks":[{"label":"vuejs:start","type":"npm",//命令待执行(对应package.json中的scripts命令)"script":"dev","isBackground":true}]}执行上述配置时,运行的命令为:npmrundev,如果你的项目是另一个启动命令,然后将其修改为相应的脚本名称。注意:type的其他可选值是shell或者process,不要傻傻的改成yarn。类型:任务的类型。对于自定义任务,可以设置为shell或process。如果设置为shell,该命令将被解释为shell命令(例如:bash、cmd或PowerShell)。如果设置为进程,命令将被解释为要执行的进程。更多信息:tasks.json文件的更多配置请参考:https://code.visualstudio.com/docs/editor/tasks#_custom-taskshttps://code.visualstudio.com/docs/editor/tasks-附录关于VSCodetasks功能的更多信息,请参考:https://code.visualstudio.com/docs/editor/tasksBreakpoint我们稍微改变一下src/views/AboutView.vue文件的内容,然后点击两个断点。 {{计数}}这是一个关于页面
