1：浏览器报错
TypeError:Cannot read property '$options' of undefined
仅仅是为了迎合这个系列文章的标题，这里主要想讲下进行vue开发时怎么查看控制台中的错误。
2: 问题引出并查找
项目中为了减少webpack打的vendor包太大，我们把主要的几个大框架独立出来放到index.html手动引入，这里我们没区分本地和线上，所以为了省事，直接引入的xxx.min.js，正常要做2份index.html的，一份里边引入的min包，一份引入的是未压缩包。所以导致我们调试的时候，报出的错误不直观，报错位置都是minJS中压缩过的，看不明显。但是对于这套技术架子，框架十分熟悉的，瞬间定位到错误是哪，也是可以的。附上几张图吧，直观。
image.png
图中，有几个关键点：
1：10,表示这个错误重复了10次，所以可以猜出代码里有什么地方是10处相同的地方，连续触发vue抛出warn。
2：TypeError,描述了错误的原因，但是你一下子看肯定是有些蒙的，毕竟对框架里封装处处细节不了解。大致意思是：$option 属性是没定义的。
3：再看下引发错误的文件，基本都是vue.min.js，好，我们点击进去看下。发现都是压缩后的代码，看不懂，其实就算没压缩，完全看懂也是挺费劲。
然后，我们引入未压缩版的vue。发现控制台错误体现的更明显了。
image.png
这里，控制台是打印了20次错误信息，由于不是都一样的，也就是不全是在vue源码中同一个位置触发的，所以分别打印，不过时交替打印的。
图中，有几个关键点：
1：Error in render,说明是一个渲染错误，所以在视图层，锁定html。
2：TypeError,描述了错误的原因，$option 属性是没定义的，所以你猜测是html上的书写有误导致了这个属性没找到，视图层我们使用的是elementUI，因为一旦dom没有按照要求书写，会导致源码一些查找逻辑失灵。
3：锁定了发生错误的位置文件，在bannerPage 组件。
在看下一张打印的错误截图：
image.png
看到这里，你是不是一目了然，表单 el-form 标签没找到。查看目标文件，发现，我们的el-form-item 有些没放到el-form中包裹。
网友评论