前情提要

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

經(jīng)過(一)

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

經(jīng)過(二)

在本地啟動項目后，然后打開IE的開發(fā)者控制臺，會發(fā)現(xiàn)報了語法錯誤，

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

經(jīng)過(三)

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

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

經(jīng)過(四)

處理完上面的問題之后大多數(shù)情況下，問題就已經(jīng)解決了，但是比較神奇的是有的時候還是不行，那是因為還有一個地方需要坐下修改，那就是.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的項目中發(fā)現(xiàn)vue-property-decorator插件也是使用了非ES5語法導致IE11無法兼容。

總結

其實上面的sockjs-client一般情況下只會在本地出現(xiàn)，因為本地啟動的服務本質是啟動的socket服務，而發(fā)布到線上的代碼是經(jīng)過打包后的代碼，跟socketjs-client不發(fā)生關系，除非你項目中用到了webSocket

到此這篇關于vue項目兼容ie11的實現(xiàn)方法的文章就介紹到這了,更多相關vue項目兼容ie11內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論