React build项目部署后IE浏览器报错：对象不支持"assign"属性或方法的解决

用React build项目，部署后 IE 浏览器打不开（我用的是 IE11），控制台报错：SCRIPT438：对象不支持"assign"属性或方法。

这是 IE 浏览器 对 ES6 的兼容性问题。

解决方法：

使用 create-react-app 官方提供的 react-app-polyfill，然后在入口文件 index.js 中引入：

react-app-polyfill 软件包包括适用于各种浏览器的 polyfill ，包括 Create React App 项目使用的最低要求和常用语言功能。

用法：

安装 polyfill 软件包

可以使用 npm 或 Yarn 安装软件包：

npm install react-app-polyfill

或者：

yarn add react-app-polyfill

如果要在项目中使用，可以这样：

npm install react-app-polyfill --save

或者：

npm install react-app-polyfill --save-dev

引入 polyfill

在项目的 src/index.js 文件的开头加入下面两行代码，一定要放在第一行（最上面），否则会不起效。

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

polyfill 使用详解

Internet Explorer 浏览器支持

根据项目需求，导入你需要的最低版本的入口点，确保满足使用 Create React App 所需的最低语言功能。

例：如果导入 IE9 入口点，则将同时支持 IE10 和 IE11 。

模块确保存在以下语言功能：

Promise（为async/ await支持）

window.fetch （一种基于承诺的方法，可在浏览器中发出Web请求）

Object.assign（对象传播所需的帮助者，即{ …a, …b }）

Symbol（for…of语法和朋友使用的内置对象）

Array.from（数组扩展使用的内置静态方法，即[…arr]）

如果需要更多功能，请继续往下看。

注意：引入的时候，要放在第一行，否则会不起效。

Internet Explorer 9

// 必须放在 src/index.js 文件的第一行
import 'react-app-polyfill/ie9';
 
// ...

Internet Explorer 11

// 同样的，将下面一行代码放在 src/index.js 代码的最前面
import 'react-app-polyfill/ie11';
 
// ...

充填其他语言功能

polyfill 还可以填充目标浏览器中不可用的稳定语言功能。如果您在 Create React App 中使用，它将在 browserslist 导入 stablepolyfill 时自动使用你定义的对象，仅包含目标浏览器所需的 polyfill。

// 放在 src/index.js 的第一行
import 'react-app-polyfill/stable';
 
// ...

如果你需要同时兼容 Internet Explorer 9 或 Internet Explorer 11 ，应引入 IE9 或 IE11 和 stable 模块：

对于IE9：

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

对于IE11：

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

这样一般就能解决 IE 浏览器不兼容的问题了。