解决create-react-app创建的项目在IE浏览器空白兼容性问题（支持IE11、IE10、IE9）

admin管理员组

文章数量:1573021

通过create-react-app创建的项目在IE浏览器空白一片，今天来说说解决方案，支持ie9–ie11。

支持IE11的操作

1.检查node_module里面有没有 ‘react-app-polyfill’ 模块，如果没有，通过命令 npm install react-app-polyfill --save 安装。

2.如果有此模块，接下来需要进行修改配置文件 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"  // 新增
    ]
  }

3.然后在项目的js入口文件index.js顶部引入模块 react-app-polyfill

// IE polyfill
import  "react-app-polyfill/ie9";
import  "react-app-polyfill/stable";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

4.执行命令 npm run eject 将配置文件暴露出来（config、scripts、package-lock.json，一般下载的新脚手架的项目根目录中没有config等配置文件，需要通过命令暴露出项目配置文件），然后找到根目录下package-lock.json文件，按照此地址（github地址：添加代码支持IE11）修改package-lock.json文件。

5.删除node_moudles文件夹，然后通过命令 npm install 重新安装，重新启动项目，在IE11看效果，解决！

支持IE10/IE9的操作

1.通过命令 npm install core-js mutation-observer --save 安装模块。

2.然后在项目的js入口文件index.js顶部引入模块 core-js和mutation-observer

// IE polyfill
import  "core-js/es";
import  "mutation-observer";
import  "react-app-polyfill/ie9";
import  "react-app-polyfill/stable";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

3.修改文件config/webpack.config.js,调换位置

 entry: [
      paths.appIndexJs,  // 新增
      // Include an alternative client for WebpackDevServer. A client's job is to
      // connect to WebpackDevServer by a socket and get notified about changes.
      // When you save a file, the client will either apply hot updates (in case
      // of CSS changes), or refresh the page (in case of JS changes). When you
      // make a syntax error, this client will display a syntax error overlay.
      // Note: instead of the default WebpackDevServer client, we use a custom one
      // to bring better experience for Create React App users. You can replace
      // the line below with these two lines if you prefer the stock client:
      // require.resolve('webpack-dev-server/client') + '?/',
      // require.resolve('webpack/hot/dev-server'),
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
      // Finally, this is your app's code:
      // paths.appIndexJs,  // 删除
      // We include the app code last so that if there is a runtime error during
      // initialization, it doesn't blow up the WebpackDevServer client, and
      // changing JS code would still trigger a refresh.
    ].filter(Boolean),

4.按照此地址（github地址：添加代码支持IE10/IE9）修改package-lock.json和package.json文件。

5.通过命令 npm install setprototypeof --save 安装模块

6.手动创建js文件 src/polyfill.js ，写入代码如下：

import setprototypeof from  'setprototypeof';
 
Object.setPrototypeOf = setprototypeof; 

7.index.js引入polyfill.js文件

// IE polyfill
import  "./polyfill";
import  "core-js/es";
import  "mutation-observer";
import  "react-app-polyfill/ie9";
import  "react-app-polyfill/stable";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

8.打开IE9和IE10看效果，至此解决！

本文标签： 空白浏览器兼容性问题项目app