兼容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/runtime
import 'core-js/stable';
import 'regenerator-runtime/runtime';

第三步:

配置transpileDependencies,跟上面一样。

第四步:(可以没有)

根据项目实际情况,看是否有必要引入。如果引入,建议下载到本地,再引入,我的项目里就没有用。

在 index.html 文件中引入 es6-proxy-polyfill.js

<script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>

第五步:(解决页面排版错误)

如果项目中使用了 CSS var() ,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浏览器阴影无效果,多行文本显示几行其余显示身略号等问题,都不是大问题,都容易,可以忽略的样式效果问题能忽略就忽略,毕竟是兼容嘛。

好了,这个大坑分享完了!

Logo

前往低代码交流专区

更多推荐