Visual Studio Code 断点调试 Vue（用vue-cli构建的项目）

原文链接：https://segmentfault.com/a/1190000013392459

按照原文实际操作了一遍，有地方需要修改。

第一步：

第二步：

划重点：在vue里面，还需要修改webpack.dev.conf.js文件：

就是把没有的devtools加上：

devtool: config.dev.devtool,

第三步：

打开dev-server.js文件，找到默认打开浏览器设置的地方：把原来的opn(uri)改成下面这个： 

然后启动node服务器：npm run dev，成功之后，点开【调试】，按F5，启动成功。

这里解释一下，原文作者是这么配置的：

这样有一个问题就是node启动后，会默认打开一个浏览器，而调试的浏览器必须由我们手动打开。浏览器调试的时候只能打开一个。这就很麻烦，还要关浏览器，还要打开。如果我默认浏览器是chrome，那node启动成功默认打开的浏览器不行，不能用于debugger。经常会出现下面的问题：

然后我们可以看到dev.server.js文件中的opn。这个神奇的东西大家可以百度自行了解。第一个参数是设置的默认打开的域名和端口，第二个参数是一个对象，可以设置默认打开的浏览器，以及参数。所以用这个办法就可以啦。

这是在Vue全家桶里面，是上面的配置。node把所有的事都做了，包括调用webpack打包，使用webpack的热重载插件，作为服务器发布前端等等。

如果我们脱离了vue，自己构建应用，手动用webpack打包，也是可以的。这时候我们需要一个服务器（因为node服务器没有了），可以放在IS服务器上发布，把launch.js文件里的url改成发布的网址，要一致。webpack打包命令（webpack）。