序

用webstrom调试Vue.js单页程序理论上应该支持所有用webpack构建的应用程序

Webstrom版本：2017.1

代码：使用vue-cli构建的基本单页应用程序

修改网络包配置

由于webpack将所有文件打包在一起，我们需要webpack为我们提供一个源图

将devtool修改为源代码映射。这是我的开发配置文件webpack.dev.conf.js

module . exports=merge(base webpackconfig，{ module : { rule s : utils . style loaders({ source map : config . dev . CSS source map })}，//便宜-module-eval-source-map对于开发工具更快： 'source-map '，plugins: [ new webpack。definepreplugin({ ' process . env ' : config . dev . env })，//https://github.com/glen jamin/webpack-hot-中间件#安装-使用新web pack。HotModuleReplacementPlugin()，新的webpack。NoEmitOnErrorsPlugin()，//https://github.com/ampandwired/html-web pack-plugin new html webpackkplugin({ filename : ' index . html '，template :' index.html '，inject : true})，new friendyerrorsplash()]})来安装查看器扩展

这里你需要安装一个chrome扩展，点击链接安装它

https://chrome . Google.com/web store/detail/jet brains-ide-support/hmhgeddbohgjknpmjaggdomcobmllji/related

创建新的调试

运行-编辑配置

选择Javscript调试

填写网址后，将显示以下目录映射

运行调试

设置断点，点击右上角的bug

之后浏览器会打开，运行到你设置的断点位置，会唤醒webstrom

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。