时间:2021-05-25
前言
使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack 构建的应用程序
webstrom 版本:2017.1
代码:使用 vue-cli 构建的基础单页面应用
修改 webpack 配置
由于 webpack 把所有文件全部打包到一起,所以我们需要 webpack 提供给我们一个源地图
修改 devtool 为 source-map 这是我的开发配置文件 webpack.dev.conf.js
module.exports = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // cheap-module-eval-source-map is faster for development devtool: 'source-map', plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), new FriendlyErrorsPlugin() ]})安装游览器扩展
这里需要安装一个 chrome 的扩展程序,点击链接进去安装即可
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji/related
新建一个 debug
Run-> Edit Configurations
选择 Javscript Debug
填上 URL 之后,下面的目录映射就会显示出来
运行 debug
设置好断点,点击右上角的小虫子
之后会打开游览器,当运行到你设置的断点位置时,会唤起 webstrom
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
介绍vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路
vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用
vue.js组件组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在大型单页面应用中,处于对性能的考虑和首屏
Vue下路由Historymode导致页面无法渲染的原因用Vue.js+vue-router创建单页应用,是非常简单的。使用Vue.js,我们已经可以通过组合组