前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React build项目部署后IE浏览器报错:对象不支持"assign"属性或方法的解决

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

作者头像
德顺
发布2019-11-12 23:16:33
3.2K0
发布2019-11-12 23:16:33
举报
文章被收录于专栏:前端资源前端资源

用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 安装软件包:

代码语言:javascript
复制
npm install react-app-polyfill

或者:

代码语言:javascript
复制
yarn add react-app-polyfill

如果要在项目中使用,可以这样:

代码语言:javascript
复制
npm install react-app-polyfill --save

或者:

代码语言:javascript
复制
npm install react-app-polyfill --save-dev

引入 polyfill

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

代码语言:javascript
复制
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
代码语言:javascript
复制
// 必须放在 src/index.js 文件的第一行
import 'react-app-polyfill/ie9';
 
// ...
Internet Explorer 11
代码语言:javascript
复制
// 同样的,将下面一行代码放在 src/index.js 代码的最前面
import 'react-app-polyfill/ie11';
 
// ...
充填其他语言功能

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

代码语言:javascript
复制
// 放在 src/index.js 的第一行
import 'react-app-polyfill/stable';
 
// ...

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

对于IE9:

代码语言:javascript
复制
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

对于IE11:

代码语言:javascript
复制
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

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

声明:本文由w3h5原创,转载请注明出处:《React build项目部署后IE浏览器报错:对象不支持"assign"属性或方法的解决》 https://cloud.tencent.com/developer/article/1537815

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决方法:
  • 用法:
  • polyfill 使用详解
    • Internet Explorer 浏览器支持
      • Internet Explorer 9
        • Internet Explorer 11
          • 充填其他语言功能
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档