前后端分离使前端的断点调试更加复杂，chrome中调试vue，需要先在vscode中装Debugger for Chrome插件，然后增加调试的配置修改launch.json配置文件；可以参考vue官网步骤：chrome中调试vue
在集成过程中，可以使用debugger对指定的js文件行进行debugger操作，也可以在vue.config.js文件中通过设置devtools在运行时候在前端看source：webpack的devtools；也可以在vscode直接开启chrome进行调试运行；
// vue.config.js文件中设置devtools
config
.when(process.env.NODE_ENV === 'development',
config => config.devtool('source-map')
)一 、安装Debugger for Chrome
如下，在vscode的扩展插件按钮中安装，或者直接在chrome中下载后安装：debugger
二、增加launch.json配置文件，修改chrom的调试配置，这里的url就是当前项目的入口url；
三、打断点运行，左上角的播放即弹出来一个chrome中运行的项目的页面；
