vue项目查看源码不显示html,Chrome浏览器找不见Vue项目源代码

Vue项目在Chrome浏览器的源代码混乱，无法调试问题先上个问题图：这怎么Debug，头大！！还能不能快乐的开发了？？？先直接说我的解决办法，再碎碎念在文件 vue.config.js 的configureWebpack对象加一个元素 devtool: ‘source-map’如图：搞定！重启下项目，按F12 看看效果去吧解决问题的可以走了，如果还没解决问题，可以看下以下内容。--------

LearnAndCode

3464人浏览 · 2021-06-21 12:19:19

LearnAndCode · 2021-06-21 12:19:19 发布

Vue项目在Chrome浏览器的源代码混乱，无法调试问题

先上个问题图：

6d2ea61a203b

这怎么Debug，头大！！还能不能快乐的开发了？？？

先直接说我的解决办法，再碎碎念

在文件 vue.config.js 的configureWebpack对象加一个元素 devtool: ‘source-map’

如图：

6d2ea61a203b

搞定！重启下项目，按F12 看看效果去吧

解决问题的可以走了，如果还没解决问题，可以看下以下内容。

-----------------------------------------------碎碎念分割线-------------------------------------------

之所以会出现这种情况，一般是Vue模板项目取消设置SourceMap，为了避免前端源码在浏览器端泄露。

解决这个问题，就是配置一个 SourceMap就好。

关键点来了，不同脚手架版本，配置代码不同！我的脚手架是3.x.x，如果你是其他版本，就找找其他配置方法。

浏览器搜索关键字【Vue 浏览器调试源代码】找找

————————————————

原文链接：https://blog.csdn.net/RUNINGbirds/article/details/107087082

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^