项目需要解决兼容ie9
- 首先看下项目在ie9下显示的报错内容
6610F770-F67F-474e-9197-70D6EDBA7A64.png
先不管css报错问题，我们知道即使css报错，页面应该会显示出来，只是样式有问题而已，然而我的项目是一片空白；仔细看报错信息：script5007：无法获取属性toggle的值：对象为null 或未定义
于是在项目中搜索哪里用到了toggle，发现有些函数名叫toggle而已，其他并没有调用的地方，后来仔细想了一下，应该是引入的某些依赖里用到了这个属性；
网上百度，说是jQuery1.9版本以上都不支持了toggle了，于是把jQuery降低到1.8，结果又发现项目中用boostrap说需要jQuery1.9版本以上。于是陷入了沉思；
后来仔细看报错，报错顺序先提示toggle对象为null，后踢死的boostrap问题，心想应该还不是这个解决思路。后来终于有了突破，虽然项目压缩了，但是显示的是vendor。js 40行184179个字符有问题，然后代码中搜索到该处，发现是引入的富文本插件vue-quill-editor的问题，把这个插件去掉，项目就不显示空白了
-
解决了空白问题，又出现了样式报错，样式问题
样式
毫无疑问，样式错乱，但是不影响功能了，可以正常登陆了
登陆进去后，发现所有的字符文件样式都是异常的，不正常显示
仔细看了报错是 polyfill-eventsource added missing EventSource to window 于是网上百度怎么解决这个问题，因为我以为是这个问题导致的样式问题；
后来发现网上的方法并没有作用，什么引入babel-polyfill，项目中其实早就加了，一直无法解决这个问题。想了一天都没有解决思路，样式还是错乱，还是依旧保上面的错误，陷入了死循环
后来在ie上仔细看了样式，登陆页面在单个vue中下面写的样式都没有显示，于是在项目入口app.vue引入的项目文件，一共五个样式文件表
68211B84-C1F8-45d2-A300-E2B459628579.png
我现在index.scss中加入了登陆页面的样式，设置背景色为red。发现起作用，也就是index样式引入没问题，又在clue.scss中加入登陆也样式，发现不起作用，也就是样式表从clue.scss以下都没有起作用，简单粗暴，clue以下的三个样式文件全部注释掉，发现登陆也样式正常了。
也就是所在ie9中，下面引入了五个样式文件，其中三个都不起作用，导致了其他样式问题。
解决方案：
- 将样式文件在其他模块中引入---问题是：样式文件有点杂，引入地方不当，可能导致样式丢失
- 想到了ie9打包后，样式文件需要用webpack分割，因为一个样式文件如果过大，会导致样式丢失，所以开发模式的时候css文件过大可能也会导致样式丢失
- 以上两个思路，就可以解决ie9中样式不起作用问题。把样式文件再压缩，一个vue文件中的样式文件表加起来样式不要过多。
网友评论