没事写点工作中遇到的问题

项目需要解决兼容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文件中的样式文件表加起来样式不要过多。

你可能感兴趣的:(没事写点工作中遇到的问题)