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)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容