Vue兼容ie瀏覽器 ,vue項目IE瀏覽器白屏不顯示解決方案

原因分析:? Ie瀏覽器不兼容的原因主要是因為不識別es6語法

解決:需要通過babel-polyfill轉化,使項目中的依賴包支持ie瀏覽器

說明:在vue cli4.x之后,無需手動安裝babel-polyfill,腳手架中已經(jīng)內置

如果腳手架版本低需要下載依賴

npm i babel-polyfill –save

一般項目中有babel-polyfill,就會自動轉化依賴包,但是也有一些特殊的依賴包不被babel識別

如果你還是發(fā)現(xiàn)瀏覽器白屏不顯示,那可能就是有一些依賴不被babel識別需要你手動修改webpack進行添加

報錯說明:1002/1003控制臺會提示缺少 : 語法錯誤

那么解決方法如下

找到報錯時提示的未識別的依賴,一般是在報錯的最后面

也就是這個socket.io-client,babel里面沒有,只要把這個依賴添加進去就可以了

添加方法如下:

第一種:如果是cli3+ 創(chuàng)建的vue項目

首先,在根目錄新建vue.config.js

然后,在里面添加你報錯時提示的依賴包,加上這個配置transpileDependencies

transpileDependencies:?["socket.io-client","vue-particles"]

重新運行項目可能還有報錯,那就繼續(xù)找還需要添加哪個,比如提示我后面添加的那個依賴包vue-particles,這是一個Vue粒子效果插件,那么就繼續(xù)添加進去

第二種,如果是vue cli2.x創(chuàng)建的項目,也就是項目默認有build和config文件夾的

第一步

找到build下面的webpack.base.conf.js

然后找到module下面的rules,在.js$模塊添加對應的依賴

其他配置 : 下面是加不加都行的 反正我項目不加也不影響運行

1. 一般在項目根文件index.html里面會有meta兼容iE的標簽,如果沒有請?zhí)砑蛹^指的這句

2.在main.js里引入babel

import?'babel-polyfill'

3.修改源碼

例如vue-particles 插件,還有一種方法是修改node_modules里插件源碼

原vue-particles/src/vue-particles/index.js代碼如下:

IE不支持install(){}這種寫法,故修改如下:

當然了其他插件也可以修改源碼,自行百度,今天分享的東西就是這些了

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容