Vue 不支持 IE8 及以下版本，因?yàn)?Vue 使用了 IE8 無(wú)法模擬的 ECMAScript 5 特性。但對(duì)于 IE9+，Vue 底層是支持。

由于開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)使用一些第三方插件或組件，對(duì)于這些組件，有時(shí)我們需要做一些處理。下述主要闡述如何使用 vue-cli3 腳手架搭建的工程支持 IE11。

現(xiàn)象

IE11 打開(kāi) Vue 工程（Vue CLI）構(gòu)建而來(lái)出現(xiàn)空白頁(yè)，控制臺(tái)告警、報(bào)錯(cuò)。

如：

• DOM7011: 此頁(yè)上的代碼禁用了反向和正向緩存
• HTML1300：進(jìn)行了導(dǎo)航
• app.js 各種語(yǔ)法錯(cuò)誤

browserslist

項(xiàng)目中 package.json 文件里的 browserslist 字段 (或一個(gè)單獨(dú)的 .browserslistrc 文件)，指定了項(xiàng)目的目標(biāo)瀏覽器的范圍。這個(gè)值會(huì)被 @babel/preset-env 和 Autoprefixer 用來(lái)確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。

• @babel/preset-env：將你使用最新 JavaScript 語(yǔ)法，靈活的轉(zhuǎn)化為目標(biāo)瀏覽器所支持的 polyfill。
• Autoprefixer：PostCSS 插件，為瀏覽器增加前綴。

.browserslistrc

> 1% last 2 versions not ie < 11

Polyfill

默認(rèn)的 Vue CLI 項(xiàng)目會(huì)使用 @vue/babel-preset-app，它通過(guò) @babel/preset-env 和 browserslist 配置來(lái)決定項(xiàng)目需要的 polyfill。

默認(rèn)情況下，它會(huì)把 useBuiltIns: 'usage' 傳遞給 @babel/preset-env，這樣它會(huì)根據(jù)源代碼中出現(xiàn)的語(yǔ)言特性自動(dòng)檢測(cè)需要的 polyfill。這確保了最終包里 polyfill 數(shù)量的最小化。然而，這也意味著如果其中一個(gè)依賴(lài)需要特殊的 polyfill，默認(rèn)情況下 Babel 無(wú)法將其檢測(cè)出來(lái)。

Vue CLI 文檔 中，提供了三種方式：

• 如果該依賴(lài)基于一個(gè)目標(biāo)環(huán)境不支持的 ES 版本撰寫(xiě): 將其添加到 vue.config.js 中的 transpileDependencies 選項(xiàng)。這會(huì)為該依賴(lài)同時(shí)開(kāi)啟語(yǔ)法轉(zhuǎn)換和根據(jù)使用情況檢測(cè) polyfill。
• 如果該依賴(lài)交付了 ES5 代碼并顯式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-app 的 polyfills 選項(xiàng)預(yù)包含所需要的 polyfill。注意 es6.promise 將被默認(rèn)包含，因?yàn)楝F(xiàn)在的庫(kù)依賴(lài) Promise 是非常普遍的。

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

提示：我們推薦以這種方式添加 polyfill 而不是在源代碼中直接導(dǎo)入它們，因?yàn)槿绻@里列出的 polyfill 在 browserslist 的目標(biāo)中不需要，則它會(huì)被自動(dòng)排除

• 如果該依賴(lài)交付 ES5 代碼，但使用了 ES6+ 特性且沒(méi)有顯式地列出需要的 polyfill (例如 Vuetify)：請(qǐng)使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。這會(huì)根據(jù) browserslist 目標(biāo)導(dǎo)入所有 polyfill，這樣你就不用再擔(dān)心依賴(lài)的 polyfill 問(wèn)題了，但是因?yàn)榘艘恍](méi)有用到的 polyfill 所以最終的包大小可能會(huì)增加。

我們采用了最簡(jiǎn)單最直接（但是性能不是最好）的第 3 種方式！

第一步： 在 babel 的相關(guān)配置文件（babel.config.js、.babelrc 或 package.json 的 babel 字段任一）中，增加 "useBuiltIns": "entry" 信息。babel 7 版本以后，會(huì)有差異 -- 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"}]] }

!!! 網(wǎng)上信息比較混亂，經(jīng)常出現(xiàn)幾種方式混用，并不合理！

第二步： 安裝 '@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

---

至此，我們已按照官方要求做了配置，重新啟動(dòng)項(xiàng)目，發(fā)現(xiàn)依然不行！！

transpileDependencies

默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件。如果你想要通過(guò) Babel 顯式轉(zhuǎn)譯一個(gè)依賴(lài)，可以在 transpileDependencies 選項(xiàng)中列出來(lái)。

下一步：使用 babel 對(duì) elementUI、vuex（需要 Promise polyfill -- Here） 進(jìn)行轉(zhuǎn)換。

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

如果該依賴(lài)基于一個(gè)目標(biāo)環(huán)境不支持的 ES 版本撰寫(xiě): 將其添加到 vue.config.js 中的 transpileDependencies 選項(xiàng)。這會(huì)為該依賴(lài)同時(shí)開(kāi)啟語(yǔ)法轉(zhuǎn)換和根據(jù)使用情況檢測(cè) polyfill。

vue.config.js

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

根據(jù)你的項(xiàng)目實(shí)際情況，此處 element-ui 可能不需要

proxy

針對(duì) Proxy 對(duì)象進(jìn)行 polyfill。

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

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

根據(jù)項(xiàng)目實(shí)際情況，看是否有必要引入。如果引入，建議下載到本地，再引入。

---

至此，項(xiàng)目終于不是空白頁(yè)了！！

但是，出現(xiàn)了大量排版錯(cuò)誤！

css polyfill

由于我們項(xiàng)目中，大量使用了 CSS var() ，IE11 不兼容導(dǎo)致，思路相同，尋找相應(yīng)的 polyfill 即可。這里我們使用了 css-vars-ponyfill

$ npm install --save css-vars-ponyfill

main.js

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

大功告成！

總結(jié)

總之，所有的處理都是圍繞轉(zhuǎn)換成 IE11 可以兼容的方式去處理。對(duì)于 JavaScript 語(yǔ)法，即是對(duì) babel 的控制；對(duì)于 CSS 語(yǔ)法，需要特定分析。

IE 微軟已不再維護(hù)，也希望我們所有的前端小伙伴可以早日脫離這苦海！

歡迎關(guān)注 「 Super 前端 」微信公眾號(hào)

版權(quán)聲明：
本文原創(chuàng)自我的博客：李剛的學(xué)習(xí)專(zhuān)欄

總結(jié)

以上是生活随笔為你收集整理的vue导入非es6 js文件_Vue项目兼容IE11的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。