星级酒店网站建设公司,企业微网站与手机微信,如何建设机器人教育网站,网站建设找扌金手指排名Vue构建项目断点调试过程问题总结 问题背景 前端开发过程中#xff0c;碰到问题时需要debug#xff0c;快速分析和解决问题。一般除了console.log的方式打印日志外#xff0c;更方便直观的方式就是打断点debug。本文对vue项目debug过程可能碰到的问题进行总结#xff0c;…Vue构建项目断点调试过程问题总结 问题背景 前端开发过程中碰到问题时需要debug快速分析和解决问题。一般除了console.log的方式打印日志外更方便直观的方式就是打断点debug。本文对vue项目debug过程可能碰到的问题进行总结持续更新。 问题分析 1直接在构建方式的vue项目的js代码中加入debugger断点运行报错unexpected ‘debugger’ statement no-debugger 问题解决 eslink规则没有开启’debugger’ 被规则屏蔽了需要手动放开。 方式一找到.eslintrc.js 的“rules将”no-debugger的值‘2’改为‘0’ 方式二找到项目中的 package.json 文件——》找到 eslintConfig 配置参数——》在 eslintConfig 下的 rules 添加 “no-debugger”: “off” 2vue项目js代码中加入debugger断点后进行调试不过由于项目比如使用webpeck打包过程会经过压缩混淆等操作网页中无法显示完整的源代码断点便无法生效如图所示 问题解决 vue.config.js配置文件中配置source-map可以在调试过程映射完整源码进而可以正常debug断点调试。代码如下 configureWebpack: (config) {...config.devtool source-map},