springboot-react 应用程序在 Internet Explorer 11 和 9 中不起作用

IT技术 reactjs spring-boot internet-explorer internet-explorer-11 internet-explorer-9
2021-05-07 04:54:27

我的 React 应用程序无法在 Internet Explorer 11 上运行。它在 Edge 和 chrome 上运行良好。当我通过 Node.js 连接我的应用程序时,react build 文件夹它在 IE 11 和 9 中工作正常。通过节点服务器端口它正在工作。

现在我正在使用 spring boot,但它在 IE11 和 9 中不起作用。我已经在 IIS 中部署了我的 React 应用程序。

我已经通过npx create-react-app.(正如在类似问题的其他答案中指出的那样)创建了我的应用程序

我已经将它包含在我的 index.js 文件中,但它不起作用。并在我的应用程序中安装了 polyfills https://www.npmjs.com/package/react-app-polyfill

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

这是我得到的错误: 在此处输入图片说明

我查看了链接,他们也遇到了同样的错误,他没有批准任何答案,但React 应用程序无法在 Internet Explorer 11 中运行 这是我的 package.json 文件:

{
      "name": "insurance_automation",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "bcryptjs": "^2.4.3",
        "body-parser": "^1.19.0",
        "config": "^3.1.0",
        "cors": "^2.8.5",
        "express": "^4.17.1",
        "jsonwebtoken": "^8.5.1",
        "multer": "^1.4.1",
        "mysql2": "^1.6.5",
        "node": "^11.15.0",
        "nodemailer": "^6.2.1",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-router-dom": "^5.0.0",
        "react-scripts": "3.0.1",
        "sequelize": "^5.8.6",
        "universal-cookie": "^4.0.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "dev": "concurrently \"npm run server\" \"npm start\" "
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "concurrently": "^4.1.0",
        "nodemon": "^1.19.1"
      }
    }

谁能帮我解决这个问题。

2个回答

正如https://www.npmjs.com/package/react-app-polyfill建议的那样:

如果您支持 Internet Explorer 9 或 Internet Explorer 11,则应同时包含 ie9 或 ie11 和稳定module

在你的主 js 文件中导入react-app-polyfill 的稳定module:

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

并且ie11还应该包含在您的浏览器列表中:

  "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"
    ]
  }

什么对我的开发和生产都有效

1.导入 polyfills https://www.npmjs.com/package/react-app-polyfill#polyfilling-other-language-features

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

2.将 ie11/ie9 包含在 package.json https://github.com/browserslist/browserslist 中的浏览器列表中

"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"
]

}

3.从你的 node_modules https://create-react-app.dev/docs/supported-browsers-features/#supported-browsers 中删除 .cache 文件夹(这个对开发环境有用