欢迎光临
我们一直在努力

vue项目兼容ie11如何实现

今天小编给大家分享一下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无法兼容。

以上就是“vue项目兼容ie11如何实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注云搜网行业资讯频道。

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。