WebStorm/IDEA开发调试Vue/Webpack的方法

1、Vue项目，配置修改：

打开config/index.js文件, 修改source map属性，从cheap-module-eval-source-map改为source-map

2.编辑调试配置，新建JavaScript调试配置，并设置要访问的url，以及Remote url配置

在URL处填写: http://localhost:8080( 具体的端口看自己的程序写的是监听哪一个)

在src的Remote url处填写: webpack:///src

3.启动server，可以使用WebStorm npm scripts中双击start启动server， 也可以在命令行中执行命令npm run start启动server

4.点击debug，调试DebugTest，这时候会打开chrome，如下图所示 :

5、当我们在chrome中运行vue，WebStorm就会响应断点状态，如下图所示: