在做公司官网时前期没注意到检查ie浏览器的兼容,到项目尾声的时候才发现在ie下一片空白。
工程里东西已经很多了,定义不到具体是因为什么出的错,拔剑四顾心茫然的感觉。只想到简单地在网上百度vue项目在ie浏览器下打开空白的解决办法,所有人都说是因为ie对es6的支持度不好,引用Babel-fill就好了。我就照着做了,配置也改了,没有效果,甚至有说法 “webpack-dev-server”的版本太高我都做了降版本处理,也没有解决,也问了好多人。
僵持了有足足两天,时间就这么白白浪费,很焦虑也很烦躁。
这时候一位经验比较丰富的同事,慷慨无私地帮我理了下定位错误的思路,调试bug没有思路的时候也要冷静,要有一种模块式思维,像搭积木一样,一块一块加上去,哪一块轰然倒塌就知道问题了。
于是新建了一个空的vue项目,在ie下是可以显示的,接着一点点往上加东西,之后发现就是swiper的不兼容,一加上去ie就不显示了。结果是swiper版本的问题,最新的swiper4在ie中显示就是会出问题,将版本降到3.4.2就可以显示了。同时注意swiper3和4的定义方式以及一些方法有些不一样,要做一些改动。
吸取教训,以后不要等到项目做到最后的时候才发现兼容性问题,早发现早解决。