兼容IE对于一个菜鸡前端来说,简直是噩梦般的存在。我先哭为敬!😭😭😭
好了,话不多说,摸索中解决问题之路即将开启,我们准备出发~👊(建议将文章全部看完之后再进行尝试,因为中间有很多尝试没有成功)
重要提醒:
1、改完代码记得清浏览器缓存,再去看结果,尤其是在坚信自己写得没错的时候,不行就把浏览器关了再打开(好几次都是清完缓存没反应,关了重新打开就好了,就很迷)
2、安装依赖时能用npm就别用cnpm,别问我为什么🙄️
问题产生原因及解决思路:IE浏览器不能显示vue页面,主要原因是IE无法读取es6语法特性,但对于 IE9+,Vue 底层是支持,我们要做的就是把这些转换成浏览器能读取的语法。
问题一、ie浏览器中页面空白问题
首先,官网对兼容性的问题有所说明,其中,最重要的我觉得就是browserslist和Polyfill,项目中有package.json
文件里的browserslist
字段 (或一个单独的.browserslistrc
文件),指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
1、在我的项目中是.browserslistrc
文件,在根目录下
如果你的项目里没有,你可以在package.json
文件里添加browserslist
字段或者在根目录下添加.browserslistrc
文件,文件中主要代码如下
last 2 versions> 1%not ie <= 8
其中:
" >1%" :代表着全球超过1%人使用的浏览器
“last 2 versions” : 表示所有浏览器兼容到最后两个版本
“not ie <=8” :表示IE浏览器版本大于8(实则用npx browserslist 跑出来不包含IE9 )
第三个可以直接不写,兼容版本也可以写成3或者4,2不行就多试试。
2、配置根目录下的babel.config.js文件
"presets": [["@vue/app","@babel/preset-env",{"corejs": "3","useBuiltIns": "entry"}]],
我配置了,但是项目起不起来,我就删了,也可以。
3、在transpileDependencies中添加部分不能自动转换的依赖
默认情况下babel-loader
会忽略所有node_modules
中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在vue.config.js文件中的transpileDependencies选项中列出来。transpileDependencies写在module.exports中,下面所列内容根据自己项目来添加。
transpileDependencies: [/[/\\]node_modules[/\\](.+?)?crypto-js(.*)[/\\]/,/[/\\]node_modules[/\\](.+?)?view-design(.*)[/\\]src/,/[/\\]node_modules[/\\](.+?)?swiper(.*)[/\\]js/,]
如果经过了所有努力还是大白页,那么问题大概就是出在某些依赖使用了IE无法解析的语法,而前面配置的babel不能进行转换,那就把main.js中引入的东西全部注释掉,留个最小能观察页面的东西,包括vuex,axios等东西,然后一个一个放开进行排查,排查到的写在transpileDependencies中。
到此,我的大白页问题解决了,IE浏览器中终于看到了页面。在这之前也是经过了一些列努力,后面试着把之前的东西都删了,发现有些东西并不影响,主要可能是babel版本差异造成的。
下面整理了网上看着比较靠谱的方法(正所谓,每人遇一坑,坑坑不一样,多试试)
第一步:
在 babel 的相关配置文件(babel.config.js、.babelrc 或 package.json 的 babel 字段任一)中,增加"useBuiltIns": "entry"
信息。 babel7版本以后会有差异
babel.config.js
{"presets": [["@babel/preset-env",{"useBuiltIns": "entry"}]]}
第二步:
安装 '@babel/polyfill' ,并在入口文件添加import '@babel/polyfill'
$ npm install --save @babel/polyfill
main.js
// import '@babel/polyfill' (Babel 7.4.0 以后,该包已被弃用)//推荐使用core-js/stable 和 regenerator-runtime/runtimeimport 'core-js/stable';import 'regenerator-runtime/runtime';
第三步:
配置transpileDependencies,跟上面一样。
第四步:(可以没有)
根据项目实际情况,看是否有必要引入。如果引入,建议下载到本地,再引入,我的项目里就没有用。
在index.html
文件中引入es6-proxy-polyfill.js
<script src = "/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
第五步:(解决页面排版错误)
如果项目中使用了 CSSvar()
,IE11 不兼容导致,思路相同,寻找相应的 polyfill 即可。使用了css-vars-ponyfill
$ npm install --save css-vars-ponyfill
main.js
import cssVars from 'css-vars-ponyfill'cssVars({})
问题二、部分IE浏览器能显示,但部分不行,控制台报错:无法获取未定义或null引用的属性“getItem”
问题原因是没有开启浏览器的本地存储localStorage,而项目中用到了
解决办法:在浏览器右侧设置中找到Internet选项——>高级——>勾选启用DOM存储——>确定
问题三、接口第一次请求合适,第二次请求不合适,例如用户第一次登陆成功,退出后再登陆接口请求不通
问题出在了浏览器缓存。一种办法是在浏览器进行设置,Internet选项——>常规——>浏览历史记录设置——>Internet临时文件——>勾选每次访问页面时
第一种方法不推荐,我们不能让客户去设置自己浏览器吧
第二种:给接口请求参数加时间戳new Date().getTime(),让每次请求都是新的(网上在请求头加不缓存设置的,亲测都没用)在请求封装的地方统一加
至此,兼容性的大问题解决了,剩下的就是些样式问题,比如IE浏览器阴影无效果,多行文本显示几行其余显示身略号等问题,都不是大问题,都容易,可以忽略的样式效果问题能忽略就忽略,毕竟是兼容嘛。
好了,这个大坑分享完了!