vue项目兼容ie11的实现方法

前情提要

事情的起因是项目在设计之初要求兼容IE11，也在开发之初对此做了处理，但在经过两年的多的迭代后，经过大几十个人的手之后，该项目被引入了大量的插件，又由于不经常使用IE浏览器导致不知道什么时候项目就已经不兼容IE11了。但是领导是使用IE浏览器的，突然哪天翻看项目网页的时候，打不开了。于是从上头被骂了，我们被要求将手上所有的项目都对IE11以及其他市面上的浏览器做兼容处理。

经过(一)

对于Chrome浏览器没啥好说的，是目前对开发者最有好的浏览器，但是IE11就不干了，撂挑子了。经过多个浏览器的测试，发现就IE浏览器不行，连首屏都加载失败。

经过(二)

在本地启动项目后，然后打开IE的开发者控制台，会发现报了语法错误，

然后告诉你是哪个文件的哪一行。点进去一看，没错，都是经过webpack编译压缩后的代码，看的头昏眼花。 （可能你遇到的问题所报的文件和行数列数跟我的不一样，但是原因都是一样的，后面会讲。）

经过(三)

经过一系列的排查和定位，最终发现了问题。上面这个问题的原因是sockjs-client这个插件里使用了非ES5的语法，导致IE浏览器无法解析，所以报了语法错误。这个时候有人该骂了，webpack的babel不就是将非ES5的语法转成ES5语法的吗，你到底懂不懂，到底不会不会？对啊，不是有babel转译嘛，为啥还会报语法错误？原来这是因为webpack默认不会对node_modules中的插件进行转译，需要在vue.config.js中进行配置。该属性名叫：transpileDependencies，接收一个数组作为属性值，然后把node_modules中需要babel转译的插件名输入进去，就可以了。

module.exports = {
    ...
    transpileDenpendencies: [ 'sockjs-client' ]
}

经过(四)

处理完上面的问题之后大多数情况下，问题就已经解决了，但是比较神奇的是有的时候还是不行，那是因为还有一个地方需要坐下修改，那就是.browserslistrc文件中的：not dead 改成：not ie <= 11

• 问题：这个文件有啥用呢？
  • 单独这个文件是没有用的。
  • 但是他会配合@babel/preset-env和Autoprefixer用来确定需要转译的Javascript特性和需要添加的css浏览器前缀

最后

除了上述的问题，还遇到了一个问题，那就是加密插件引起的：jsencrypt。引入的方式有两种： - import JSEncrypt from 'jsencrypt' - import { JSEncrypt } from 'jsencrypt' 第一种方式IE不兼容，第二种IE是兼容的。

附加

在对一个vue2+ts的项目中发现vue-property-decorator插件也是使用了非ES5语法导致IE11无法兼容。

总结

其实上面的sockjs-client一般情况下只会在本地出现，因为本地启动的服务本质是启动的socket服务，而发布到线上的代码是经过打包后的代码，跟socketjs-client不发生关系，除非你项目中用到了webSocket

到此这篇关于vue项目兼容ie11的实现方法的文章就介绍到这了,更多相关vue项目兼容ie11内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论