vue項目兼容ie11如何實現

今天小編給大家分享一下vue項目兼容ie11如何實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

前情提要

事情的起因是項目在設計之初要求兼容IE11，也在開發之初對此做了處理，但在經過兩年的多的迭代后，經過大幾十個人的手之后，該項目被引入了大量的插件，又由于不經常使用IE瀏覽器導致不知道什么時候項目就已經不兼容IE11了。但是領導是使用IE瀏覽器的，突然哪天翻看項目網頁的時候，打不開了。于是從上頭被罵了，我們被要求將手上所有的項目都對IE11以及其他市面上的瀏覽器做兼容處理。

經過(一)

對于Chrome瀏覽器沒啥好說的，是目前對開發者最有好的瀏覽器，但是IE11就不干了，撂挑子了。經過多個瀏覽器的測試，發現就IE瀏覽器不行，連首屏都加載失敗。

經過(二)

在本地啟動項目后，然后打開IE的開發者控制臺，會發現報了語法錯誤，

然后告訴你是哪個文件的哪一行。點進去一看，沒錯，都是經過webpack編譯壓縮后的代碼，看的頭昏眼花。 （可能你遇到的問題所報的文件和行數列數跟我的不一樣，但是原因都是一樣的，后面會講。）

經過(三)

經過一系列的排查和定位，最終發現了問題。上面這個問題的原因是sockjs-client這個插件里使用了非ES5的語法，導致IE瀏覽器無法解析，所以報了語法錯誤。這個時候有人該罵了，webpack的babel不就是將非ES5的語法轉成ES5語法的嗎，你到底懂不懂，到底不會不會？對啊，不是有babel轉譯嘛，為啥還會報語法錯誤？原來這是因為webpack默認不會對node_modules中的插件進行轉譯，需要在vue.config.js中進行配置。該屬性名叫：transpileDependencies，接收一個數組作為屬性值，然后把node_modules中需要babel轉譯的插件名輸入進去，就可以了。

module.exports = {
    ...
    transpileDenpendencies: [ 'sockjs-client' ]
}

經過(四)

處理完上面的問題之后大多數情況下，問題就已經解決了，但是比較神奇的是有的時候還是不行，那是因為還有一個地方需要坐下修改，那就是.browserslistrc文件中的：not dead 改成：not ie <= 11

• 問題：這個文件有啥用呢？

• 單獨這個文件是沒有用的。

• 但是他會配合@babel/preset-env和Autoprefixer用來確定需要轉譯的Javascript特性和需要添加的css瀏覽器前綴

最后

除了上述的問題，還遇到了一個問題，那就是加密插件引起的：jsencrypt。引入的方式有兩種： - import JSEncrypt from 'jsencrypt' - import { JSEncrypt } from 'jsencrypt' 第一種方式IE不兼容，第二種IE是兼容的。

附加

在對一個vue2+ts的項目中發現vue-property-decorator插件也是使用了非ES5語法導致IE11無法兼容。

以上就是“vue項目兼容ie11如何實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。