vue項目兼容ie11的實現方法

Posted on by

前情提要

事情的起因是項目在設計之初要求兼容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無法兼容。

總結

其實上面的sockjs-client一般情況下隻會在本地出現，因為本地啟動的服務本質是啟動的socket服務，而發佈到線上的代碼是經過打包後的代碼，跟socketjs-client不發生關系，除非你項目中用到瞭webSocket

到此這篇關於vue項目兼容ie11的實現方法的文章就介紹到這瞭,更多相關vue項目兼容ie11內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：