概括：

本文简单介绍了如何在 Vue 中对项目进行断点调试，具体内容包括但不限于：如何配置调试环境、如何在代码中设置断点、如何开始调试以及如何解决调试过程中可能遇到的问题。

在实际开发中，我们的前端项目一般都是在浏览器里的开发者工具里调试，如果要在 VS Code 里调试，也可以像中途开发一样，直接打断点就可以了，是不是很棒！！！

1.如何配置调试环境

配置调试环境还是比较简单的，不像网上一些其他文章说的需要配置一堆对新手特别不友好的参数，看不懂，完全看不懂。所以，我们不需要介绍太多其他的配置文件和如何使用，目前我们只需要保证前后端环境正常运行即可：

例如：我的后端项目可以正常启用，浏览器可以直接访问：7137//.html

然后前端项目全部OK了，后端也能正常访问了。并且页面显示出来。这就说明前后端环境都正常了，一切OK了。

2. 如何在代码中设置断点

接下来在我们的前端项目中，点击需要设置断点的函数前面，当它变成红色的时候，就说明这里设置了一个断点，程序运行到这个函数的时候就会命中断点。

3. 如何开始调试

最重要也是最关键的部分就在这里。在 VS Code 中，点击小图标，然后点击创建 .json 文件，根据你使用的浏览器选择调试器。所以我选择了 Edge

如下所示，这是生成的.json文件

上述配置中，大致含义为

前后端服务都正常运行之后，一切就绪了，找到VS Code的小图标，先设置一个断点，然后点击开始调试。

在这个过程中，前端项目必须先运行起来，否则可能会出现各种错误，比如404或者其他页面未找到错误。

注意：如果开启了调试，中途设置断点是不会命中的，只能先设置断点再开始调试，否则你会发现断点总是不起作用，至于为什么会出现这种情况，自己去探索吧！