Vue项目兼容IE11

2021-08-30 10:09:59 浏览数 (1)

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但对于 IE9 ，Vue 底层是支持。

由于开发过程中，我们经常会使用一些第三方插件或组件，对于这些组件，有时我们需要做一些处理。下述主要阐述如何使用 vue-cli3 脚手架搭建的工程支持 IE11。

现象

IE11 打开 Vue 工程（Vue CLI）构建而来出现空白页，控制台告警、报错。

如：

  • DOM7011: 此页上的代码禁用了反向和正向缓存
  • HTML1300：进行了导航
  • app.js 各种语法错误

browserslist

项目中 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

  • @babel/preset-env：将你使用最新 JavaScript 语法，灵活的转化为目标浏览器所支持的 polyfill。
  • Autoprefixer：PostCSS 插件，为浏览器增加前缀。

.browserslistrc

代码语言：javascript复制
> 1%
last 2 versions
not ie < 11

Polyfill

默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。

默认情况下，它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。

Vue CLI 文档 中，提供了三种方式：

我们采用了最简单最直接（但是性能不是最好）的第 3 种方式！

第一步： 在 babel 的相关配置文件（babel.config.js、.babelrc 或 package.json 的 babel 字段任一）中，增加 "useBuiltIns": "entry" 信息。babel 7 版本以后，会有差异 – Here

babel.config.js

代码语言：javascript复制
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

!!! 网上信息比较混乱，经常出现几种方式混用，并不合理！

第二步： 安装 ‘@babel/polyfill’ ，并在入口文件添加 import '@babel/polyfill'

代码语言：javascript复制
$ npm install --save @babel/polyfill

main.js

代码语言：javascript复制
import '@babel/polyfill'

注意，Babel 7.4.0 以后，该包已被弃用（deprecated）。官方推荐使用 core-js/stable 和 regenerator-runtime/runtime 替代。 – @babel/polyfill

至此，我们已按照官方要求做了配置，重新启动项目，发现依然不行！！

transpileDependencies

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在 transpileDependencies 选项中列出来。

下一步： 使用 babel 对 elementUI、vuex（需要 Promise polyfill – Here） 进行转换。

按照 Vue CLI 提供的 3 种方案的第 1种：

如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。

vue.config.js

代码语言：javascript复制
 transpileDependencies: [/node_modules[/\\](element-ui|vuex|)[/\\]/],

根据你的项目实际情况，此处 element-ui 可能不需要

proxy

针对 Proxy 对象进行 polyfill。

下一步： 在 index.html 文件中引入 es6-proxy-polyfill.js

代码语言：javascript复制
<span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre> 
<p><strong>根据项目实际情况，看是否有必要引入。如果引入，建议下载到本地，再引入。</strong></p> 
<hr> 
<p><strong>至此，项目终于不是空白页了！！</strong></p> 
<p>但是，出现了大量排版错误！</p> 
<h3><a id="css_polyfill_152"></a>css polyfill</h3> 
<p>由于我们项目中，大量使用了 CSS <code>var()</code> ，IE11 不兼容导致，思路相同，寻找相应的 polyfill 即可。这里我们使用了 <a href="https://github.com/jhildenbiddle/css-vars-ponyfill"><code>css-vars-ponyfill</code></a></p> 
<pre><code class="prism language-shell">$ <span class="token function">npm</span> <span class="token function">install</span> --save css-vars-ponyfill
</code></pre> 
<p><em>main.js</em></p> 
<pre><code class="prism language-javascript"><span class="token keyword">import</span> cssVars <span class="token keyword">from</span> <span class="token string">'css-vars-ponyfill'</span>
<span class="token function">cssVars</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> 
<p><strong>大功告成！????</strong></p> 
<h3><a id="_171"></a>总结</h3> 
<p>总之，所有的处理都是围绕转换成 IE11 可以兼容的方式去处理。对于 JavaScript 语法，即是对 babel 的控制；对于 CSS 语法，需要特定分析。</p> 
<p>IE 微软已不再维护，也希望我们所有的前端小伙伴可以早日脱离这苦海！</p>
babel.js 编程算法 javascript vue.js 网络安全

0 人点赞