Question

生产后，我的react应用在chrome和其他浏览器中可以正常工作。但是当谈到IE时，它仅显示带有标题的空白页。我的猜测是，它只是加载index.html而不是任何javascript文件。我该怎么办？我已经尝试过polyfill和core-js。没有运气。

这是package.json

 {
  "name": "wildfire",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "@types/react-highlight-words": "^0.16.0",
    "@version/react-router-v3": "^1.0.0",
    "antd": "^3.22.1",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "core-js": "^3.2.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.4",
    "react-dom": "^16.8.6",
    "react-router": "^3.2.4",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "serve": "^11.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      "defaults"
    ],
    "development": [
      "defaults"
    ]
  }
}

这是index.js

 import "@babel/polyfill"
    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';
    import 'core-js/es/map';
    import 'core-js/es/set';
    import 'raf/polyfill'
    import 'core-js/features/number/is-nan';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import {BrowserRouter as Router} from 'react-router-dom'
    import App from './App';
    import 'bootstrap/dist/css/bootstrap.css';
    import 'antd/dist/antd.css'
    import './index.css';
    import * as serviceWorker from './serviceWorker';

    ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: 
    serviceWorker.unregister();

这是index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>IT Forms Portal</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

我抬起头，发现有很多人对IE也有同样的问题。如何让我的应用在IE上运行？

编辑：如您所见，我已经尝试过Why IE 11 display blank page rendering react app，但它并没有解决任何问题。我在做什么错了？

Answer 1

尝试在index.html的头部添加以下元标记：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

此外，从您的代码来看，似乎您已经安装了polyfill，请检查package.json文件，确保在该文件中添加了ie 11。之后，重新启动应用程序，并检查它是否可以在IE11中使用。

在“ package.json”中添加ie 11，如下所示：

      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all",
          "ie 11"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version",
          "ie 11"
        ]
      }

Answer 2

在./node_modules/react-dev-utils/webpackHotDevClient.js文件的第66行添加斜杠：true

来源：https://github.com/facebook/create-react-app/issues/8153

react应用程序在chrome和其他浏览器中工作正常，但在IE11上返回空白页

2 个答案: