vscode中调试vue项目

在vscode中安装调试插件并配置launch.json文件，这里按照vue官网的方法即可，点击下方链接

在vscode中调试--传送门

关于launch.json的配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
}

上面是vue官方文档中给的配置，基本不用改动，需要注意的是url的配置

"url": "http://localhost:8080"

这里的url地址需要换成我们启动项目的地址，不对应的话会提示无法访问此网站！！！

启动项目、设置断点、开始调试

正常启动项目即可

调试可以键入F5或者ctrl+shift+d进入调试菜单点击绿三角

此时已经可以正常进行断点调式

有问题欢迎留言💨💌