解決create-react-app在ie中開啟頁面空白的相容性問題
阿新 • • 發佈:2020-08-19
最近使用react官方腳手架create-react-app建立專案的時候發現在ie瀏覽器開啟時顯示空白,在主流的chrome、fireFox等瀏覽器顯示是正常的。
開啟控制檯顯示如下
既然提示了語法錯誤,那麼猜想應該是相容性的問題,看了下瀏覽器的版本號是ie11。首先我翻了下create-react-app的文件,從中看到了正好有對ie9、ie10、ie11的相容性問題解決的一個方案。這時需要用到create-react-app這個外掛。
文件地址:
https://facebook.github.io/create-react-app/docs/supported-browsers-features
create-react-app github地址:
https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill
那麼下面首先下載這個外掛
npm install react-app-polyfill
可以先檢查專案中的有沒有這個外掛
react-app-polyfill
我的專案(package.json )中是有的,有就不用安裝包了。
然後在src下的index.js也就是js入口檔案中寫入
import 'react-app-polyfill/ie11'; //import 'react-app-polyfill/stable';
根據官網的提示,還需要在package.json檔案中的browserslist中新增ie11
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all", "ie 11" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie 11" ] }
最後重新執行專案發現還是空白但是瀏覽器沒有報錯,把node_moudles刪掉重新安裝後就可以正常打開了。
至此再IE11中應該就解決掉了空白頁面的問題。