vue 項目在 IE11 里呈現空白，不兼容的問題解決方案

 

我用vue 2.6.11版本編寫的項目，在谷歌瀏覽器上運行的好好地，但是放到ie11瀏覽器上卻是一片空白。

這個問題遇到的時候，我是蒙蔽了，抓緊去搜了搜百度，百度上的答案倒是都很統一。

都是說ie不兼容，解決方案都是千篇一律

大致就是以下三點：

1、在vue項目中安裝babel-polyfill
    npm install --save-dev babel-polyfill

2、mian.js中引入babel-polyfill
    import 'babel-polyfill'; 
3、在build文件夾中webpack.base.conf.js將

//entry: {
// app: ‘./src/main.js’
// },
替換為
entry: {
app: [‘babel-polyfill’, ‘./src/main.js’]
},

前兩步都還好說，第三部我沒找到webpack.base.conf.js這個文件了。

在群里問大佬，大佬說是我沒在安裝腳手架的時候選擇，但是我記得我選擇了，但是卻依舊沒有。

 

后來，我繼續翻閱相關資料博客

在 https://juejin.cn/post/6844903816043692040  中找到了跟我一樣的問題。

從而我得知道了可能是我用的swiper的原因造成的。

於是乎我搜索了一下錯誤碼     SCRIPT1002:語法錯誤

得知出現這個錯誤碼時是以下幾個方面的原因：

　　1、可能與IE的某些插件沖突。請把所有無關的IE加載項全部禁用后嘗試

　　2、引用了不存在的js文件

　　3、頁面的某些文件在文檔模型還沒建立時就已經開始引用相關的節點

　　

最后看來看去，發現還是 輪播插件swiper 中的一些最新版本 不支持ie ，還是兼容問題的鍋

所以只能將swiper 版本降級

cnpm install swiper@3.4.2 --save

將swiper 降級到3.4.2 就能正常顯示了

奧對了，別忘了更改引入時的路徑，不然項目可啟動不起來喲~

import 'swiper/dist/css/swiper.css';

 

----------------------------------

當然我從5.x版本降到3.4.2版本，導致swiper用的時候，分頁器的小點點沒有了。這是因為版本變低了，於是乎我去翻閱swiper的api文檔

 

 

按着文檔來進行適當的修改，

 

 然后就OK了。。。