vue兼容IE報錯怎么解決？解決方案分享
IE 頁面空白
報錯信息
此時頁面一片空白
報錯原因
Babel 默認只轉換新的 JavaScript 語法(如箭頭函數)，而不轉換新的 API ， 比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的對象或者方法 。
例如 Promise 、新的原生方法如 String.padStart (left-pad) 等 。為了解決這個問題 ， 我們使用一種叫做 Polyfill(代碼填充，也可譯作兼容性補丁)的技術 。
簡單的說，兼容問題一般是IE 對于es6 的部分新對象、表達式，語法并不支持，解決方案是使用 babel-polyfill 來正常使用ES6 。
Polyfill 是什么
舉個例子，有些舊瀏覽器不支持 Number.isNaN方法，Polyfill就可以是這樣的：
Polyfill就是類似這樣解決API的兼容問題
解決方案
1、使用babel-polyfill
引入 babel-polyfill
如何使用
使用它時需要在你應用程序的入口點頂部或打包配置中引入 。
在main.js 引入
或者在config中的 webpack.base.conf.js中 修改配置
2、在index.html 加入以下代碼(非必須)
3、babel-loader 中指定模塊轉碼
增加了poly-fill還是報錯，這一般是使用了第三方的ui框架、庫、插件等 ， 并且這些ui框架、庫、插件底層有es6的語法 。
找到webpack.base.conf.js 中的babel-loader
比如我這里用了element-ui 跟 v-charts 修改成如下：
如果是webpack代碼打包出錯，一般到github webpack Issues中可以找到答案
這個錯誤是因為webpack-dev-server 版本問題
5、Babel 配置 .babelrc文件
.babelrc是Babel的配置文件 ， 放在項目根目錄下 。一般情況下.babelrc文件不需要修改，如果以上都做了，還是報錯 ， 可以看下官網文檔來配置下該文件
在項目使用 vue-cli 生成的代碼中，根目錄有一個 .babelrc 文件 。在默認生成的模板內容中，增加 "useBuiltIns": "entry"，這是一個指定哪些內容需要被 polyfill(兼容) 的設置
useBuiltIns 有三個設置
【vue兼容IE報錯怎么解決？解決方案分享】false - 不做任何操作
entry - 根據瀏覽器版本的支持 ， 將 polyfill 需求拆分引入，僅引入有瀏覽器不支持的polyfill
usage - 檢測代碼中 ES6/7/8 等的使用情況，僅僅加載代碼中用到的 polyfill
總結
1、用vue 寫的項目最多可以兼容到IE9 及以上版本
2、使用babel-polyfill
3、在babel-loader中指定需要轉碼的第三方的ui框架、庫、插件路徑
4、配置 .babelrc文件
5、Babel 是一個厲害的東西
補充：
問題：ie瀏覽器autoprefixer自動補全css前綴無效
解決方法：
ie發現使用內聯樣式，autoprefixer無法生效，所以需要寫到style標簽內 。
問題：ie10打開包語法錯誤 ， 如圖所示
解決方法
點擊app.js,跳轉到報錯的位置，如圖
發現最后一行有個import的文件，所以鎖定到錯誤肯定是在引入的這個文件內 。
把common.js打開 ， 檢查語法，發現有個變量定義用了ES6的語法let 。所以引入的文件，插件沒有起作用 。
沒有將ES6轉ES5 。然后修改了之后，問題解決 。
相關經驗推薦
- 怎樣快速解決Vue項目在IE瀏覽器中顯示空白問題？解決方法分享
- 怎么解決Vue+Element ui開發中碰到的IE問題？解決方法介紹
- table自動拉伸在chrome與IE中的兼容性問題怎么解決 解決方法說明
- js怎么操作輸入框中選擇內容兼容IE及其他主流瀏覽器？解決方法分享
- VUE如何添加字幕？添加字幕圖文方法分享
- vue兼容IE報錯怎么解決？解決方法介紹
- 怎么測試IE瀏覽器對JavaScript的AngularJS的兼容性？測試技巧分享
- Web系統通過EXE文件實現讀取客戶電腦MAC等硬件信息且兼容非IE瀏覽器怎么解決？解決方法分享
- IE瀏覽器兼容Firefox的JS腳本的代碼是什么？代碼腳本分享
- jQuery.event怎么兼容各瀏覽器的event？兼容到個瀏覽器的方法說明