vue检测是不是360浏览器兼容模式

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

> 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 文档中，提供了三种方式：

如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。
如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-app 的 polyfills 选项预包含所需要的 polyfill。注意 es6.promise 将被默认包含，因为现在的库依赖 Promise 是非常普遍的。

// babel.config.js
module.exports = {presets: [['@vue/app', {polyfills: ['es6.promise','es6.symbol']}]]
}

提示：我们推荐以这种方式添加 polyfill 而不是在源代码中直接导入它们，因为如果这里列出的 polyfill 在 browserslist 的目标中不需要，则它会被自动排除

如果该依赖交付 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.

{"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 以后，该包已被弃用（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

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 微软已不再维护，也希望我们所有的前端小伙伴可以早日脱离这苦海！

欢迎关注「 Super 前端 」微信公众号

版权声明：
本文原创自我的博客：李刚的学习专栏