2020-08-03 vue兼容ie浏览器

因为项目需要,系统需要兼容IE浏览器,甚至有机器还在用IE6、7、8,头疼..............
此处省略500字脏话,该搞还是要搞的
沟通确认需求后,确定需要兼容IE9及9以上,低于IE9的跳转页面,不可以绕过检测页面,提示下载Chrome浏览器
所有IE测试都是用IE或者edge浏览器模拟测试
以下大概描述下整个兼容的过程中碰到的错误和解决办法,留作以后参考
大概解决了下项目在IE浏览器的简单报错后
IE9开始报错缺少:或者(之类的,但是其他浏览器都可以正常运行,查阅资料后发现可能是因为IE浏览器不兼容es6写法?(时间有点久,想不起来具体原因了)
通过

npm install -g es6-promise

安装es6-promise后,在mian.js中加入(因为系统还用了vue-admin-template框架,所以入口不一样)

require('es6-promise').polyfill()

将依赖转为IE9可以识别的,然后还会报es6相关的错误
发现项目中用了dll技术来缩短打包时间
找到webpack.dll.js文件后,一个个删除测试,发现打包了lodash和vue-ehcarts进dll会报es6相关错误,所以在dll中删除lodash和vue-echarts
解决后,发现报了一个新的报错“Uint8Array”未定义,查阅资料后IE没有这个对象,头疼,继续找解决办法,发现最简单的办法就是在入口处手动去定义这些对象

// 处理ie9及以下兼容问题
global.Int8Array = global.Int8Array || Int8Array
global.Uint8Array = global.Uint8Array || Uint8Array
global.Uint8ClampedArray = global.Uint8ClampedArray || Uint8ClampedArray
global.Int16Array = global.Int16Array || Int16Array
global.Uint16Array = global.Uint16Array || Uint16Array
global.Int32Array = global.Int32Array || Int32Array
global.Uint32Array = global.Uint32Array || Uint32Array
global.Float32Array = global.Float32Array || Float32Array
global.Float64Array = global.Float64Array || Float64Array

以上是解决大部分项目内报错,还有检测浏览器跳转功能
在想到做跳转检测的时候第一反应就是定义一个全局的路由守卫,这里开始就是以下所有弯路的开始了,因为对html的理解不够深刻或者vue组件写多了,有了局限性,又或者当时脑抽了,总着这里就是后面所有罪恶的开始。
想到用路由守卫检测后,就去写具体的逻辑了,写好了之后测试,没问题,美滋滋,然后开始各个功能点测试,发现有个页面在IE9打开会卡死,以为有假死循环,逐个循环查找发现不是这个原因,后面发现可能是因为这个页面的功能点太多,js太多导致页面卡死,删除大部分功能后,果然可以正常运行了,因为时间不够重写,且功能点很多,重写并不一定能解决问题,沟通后决定放弃IE9,改为兼容IE9以上可以正常使用,IE9及以下需要跳转。
然后更大的问题出现了,具体IE多少忘记了 app.js文件疯狂报错。绝望。
本来可以新写一套静态页面,去检测后跳转到各个系统,但是因为已经下发了不少地址,希望可以做到下发到链接不用改,而且这样也是有办法可以绕过检测到,所以想到用nginx去做反向代理,就在虚拟机上疯狂模拟,结果一顿操作猛如虎,一看战绩0-5
场面一度十分尴尬........
然后发现了现在再用到这套解决方案
在index.html中加入这段代码,是只有IE浏览器可以识别到一种语法,有很多种判断,具体判断不多描述,搜一下有很多讲到

    <!--[if lte IE 9]>
      <script type="text/javascript">
        (function() {
          var url ='http://' + window.location.host + '/check/'
          window.location.href = url;
        })();
      </script>
    <![endif]-->

这样在系统打包之后,这段代码的加载顺序是高于app.js的,当浏览器检测到当前浏览器低于或等于9的时候 跳转到下载的页面。
至此,结束了兼容IE的坑,反思一下自己之前实在是太局限了,只能想到在组件内操作,或者在路由文件去操作,很少去像这样直接修改index.html,记录一下,省的后面再栽在这个坑里,如果可以给其他需要兼容IE的小伙伴们提供一点思路就更好了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。