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

React build项目部署后IE浏览器报错:对象不支持"assign"属性或方法的解决 经验总结 第1张

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

React build项目部署后IE浏览器报错:对象不支持"assign"属性或方法的解决 经验总结 第2张

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

React build项目部署后IE浏览器报错:对象不支持"assign"属性或方法的解决 经验总结 第3张

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 浏览器不兼容的问题了。

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)