react 项目使用 react-app-polyfill 兼容IE11以下浏览器打开空白问题

超喜欢你呦

于 2021-06-23 16:40:08 发布

阅读量1.9k

点赞数 1

分类专栏：前端遨游之路文章标签： reactjs html5 javascript

本文链接：https://blog.csdn.net/qq_36651686/article/details/118156092

版权

前端遨游之路专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何处理因兼容性问题导致的IE11及以下版本浏览器页面无法正常显示的问题。通过安装并引入`react-app-polyfill`，在`src/index.js`顶部导入相关 polyfill，以及更新`package.json`的`browserslist`配置，可以实现对IE9及以上版本的兼容。重启项目或重新安装`node_modules`后，问题通常能得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IE11版本以下带来的兼容问题导致页面打开空白：

解决方案:

一、安装 react-app-ployfill

npm i react-app-polyfill -S

二、src/index.js 中引入

必须放在 index.js 文件顶部，否则无效。
npm传送门：https://www.npmjs.com/package/react-app-polyfill

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9'  
import 'react-app-polyfill/stable'

三、修改package.json

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "ie > 9"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "ie > 9"
  ]
}