react兼容safari9_解决create-react-app在ie中打开页面空白的兼容性问题

最近使用react官方脚手架create-react-app建立项目的时候发现在ie浏览器打开时显示空白，在主流的chrome、fireFox等浏览器显示是正常的。

打开控制台显示如下

既然提示了语法错误，那么猜想应该是兼容性的问题，看了下浏览器的版本号是ie11。首先我翻了下create-react-app的文档，从中看到了正好有对ie9、ie10、ie11的兼容性问题解决的一个方案。这时需要用到create-react-app这个插件。

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中应该就解决掉了空白页面的问题。

react兼容safari9_解决create-react-app在ie中打开页面空白的兼容性问题相关推荐

【无标题】react umi项目在谷歌，火狐，360极速模式打开正常，360兼容模式打开页面空白，报错SCRIPT1002：‘语法错误’，SCRIPT1003: 缺少 ‘:‘
react umi项目在谷歌,火狐,360浏览器极速模式打开正常,360浏览器兼容模式报错SCRIPT1002:'语法错误',SCRIPT1003: 缺少 ':' 试了很多种办法: 适配babel-c ...
php项目index页面空白,如何解决vue项目打包后打开页面空白的问题
这篇文章主要介绍了vue项目打包后打开空白解决办法,内容挺不错的,现在分享给大家,也给大家做个参考. 网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通 ...
vue 修改项目启动后的页面_vue项目打包后打开页面空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
网页打开android app,android 网页中打开 app指定页面
一.网页打开app简介 1. 用户自定义的URI (Custom URI scheme) 形式如下: scheme://host/path?parameters 2. "intent:&q ...
react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
Create React App 2.0 正式发布：Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...

react兼容safari9_解决create-react-app在ie中打开页面空白的兼容性问题

react兼容safari9_解决create-react-app在ie中打开页面空白的兼容性问题相关推荐

最新文章

热门文章