vue兼容IE11浏览器空白页等一系列问题之踩坑全过程

兼容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浏览器阴影无效果，多行文本显示几行其余显示身略号等问题，都不是大问题，都容易，可以忽略的样式效果问题能忽略就忽略，毕竟是兼容嘛。

好了，这个大坑分享完了！