专栏首页Super 前端Vue项目兼容IE11

Vue项目兼容IE11

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-envAutoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

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

.browserslistrc

> 1%
last 2 versions
not ie < 11

Polyfill

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

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

Vue CLI 文档 中,提供了三种方式:

  1. 如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。
  2. 如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-apppolyfills 选项预包含所需要的 polyfill。注意 es6.promise 将被默认包含,因为现在的库依赖 Promise 是非常普遍的。 // babel.config.js module.exports = { presets: [ ['@vue/app', { polyfills: [ 'es6.promise', 'es6.symbol' ] }] ] } 提示: 我们推荐以这种方式添加 polyfill 而不是在源代码中直接导入它们,因为如果这里列出的 polyfill 在 browserslist 的目标中不需要,则它会被自动排除。
  3. 如果该依赖交付 ES5 代码,但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify):请使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。这会根据 browserslist 目标导入所有 polyfill,这样你就不用再担心依赖的 polyfill 问题了,但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

我们采用了最简单最直接(但是性能不是最好)的第 3 种方式!

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

babel.config.js

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}
  • If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed.
  • If useBuiltIns: 'entry' is specified in .babelrc then include @babel/polyfill at the top of the entry point to your application via require or import as discussed above.
  • If useBuiltIns key is not specified or it is explicitly set with useBuiltIns: false in your .babelrc, add @babel/polyfill directly to the entry array in your webpack.config.js. module.exports = { entry: ["@babel/polyfill", "./app/js"], };

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

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

$ npm install --save @babel/polyfill

main.js

import '@babel/polyfill'

注意,Babel 7.4.0 以后,该包已被弃用(deprecated)。官方推荐使用 core-js/stableregenerator-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

 transpileDependencies: [/node_modules[/\\\\](element-ui|vuex|)[/\\\\]/],

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

proxy

针对 Proxy 对象进行 polyfill。

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

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

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


至此,项目终于不是空白页了!!

但是,出现了大量排版错误!

css polyfill

由于我们项目中,大量使用了 CSS var() ,IE11 不兼容导致,思路相同,寻找相应的 polyfill 即可。这里我们使用了 css-vars-ponyfill

$ npm install --save css-vars-ponyfill

main.js

import cssVars from 'css-vars-ponyfill'
cssVars({})

大功告成!?

总结

总之,所有的处理都是围绕转换成 IE11 可以兼容的方式去处理。对于 JavaScript 语法,即是对 babel 的控制;对于 CSS 语法,需要特定分析。

IE 微软已不再维护,也希望我们所有的前端小伙伴可以早日脱离这苦海!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux基础命令

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • JavaScript常用对象&属性&事件-图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • npm并行&串行执行多个scripts命令

    通过npm run <commander> 可以运行 package.json 中脚本,Npm 命令不能提供立即运行多个脚本的方式,同时运行需要打开多个终端窗口

    奋飛
  • Vue CLI 3 配置兼容IE10

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

    剑行者
  • Android代码规范利器: Checkstyle

    程序代码向来都不仅仅是用来运行的,写的一手好代码,易读,可维护应该是每个程序员所追求的。

    技术小黑屋
  • 企业面试题:如何实现浏览器内多个标签页之间的通信?

    舒克老师发现刚学习程序的小伙伴们容易遇到一个灰常严峻的问题,就是不知道怎么向老师提问。

    舒克
  • 常见图片格式详解系列(一)----简介

    信息时代,丰富多彩的世界,我们用图片来感知,来记忆,来存储。多姿多彩的图片格式,你是否了解其中奥妙呢。接下来小编就要带大家详细解析常见图片格式喽。

    用户1692782
  • Google CEO专访:如果全世界90%的人把工作交给机器人...

    大数据文摘
  • Android开发笔记(五十三)远程接口调用AIDL

    AIDL全称是“Android Interface Definition Language”,即Android的接口定义语言。AIDL用来协助开发者来处理进...

    用户4464237
  • FFmpeg时间戳详解

    I帧:I帧(Intra-coded picture, 帧内编码帧,常称为关键帧)包含一幅完整的图像信息,属于帧内编码图像,不含运动矢量,在解码时不需要参考其他帧...

    用户4940323

扫码关注云+社区

领取腾讯云代金券