React build项目部署后IE浏览器报错:对象不支持“assign“属性或方法的解决(解决ie不兼容的问题)

用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 文件的开头加入下面两行代码,一定要放在第一行(最上面),否则会不起效

 
  1. import 'react-app-polyfill/ie11';

  2. import 'react-app-polyfill/stable';

polyfill 使用详解

根据项目需求,导入你需要的最低版本的入口点,确保满足使用 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

 
  1. // 必须放在 src/index.js 文件的第一行

  2. import 'react-app-polyfill/ie9';

Internet Explorer 11

 
  1. // 同样的,将下面一行代码放在 src/index.js 代码的最前面

  2. import 'react-app-polyfill/ie11';

充填其他语言功能

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

 
  1. // 放在 src/index.js 的第一行

  2. import 'react-app-polyfill/stable';

  3.  

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

对于IE9:

 
  1. import 'react-app-polyfill/ie9';

  2. import 'react-app-polyfill/stable';

对于IE11:

 
  1. import 'react-app-polyfill/ie11';

  2. import 'react-app-polyfill/stable';

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

猜你喜欢

转载自blog.csdn.net/qq_37148353/article/details/108629302