Javascript 为什么我的vue web应用程序在IE11中加载一个空白页面，而在Edge中却看起来像被破坏了？

我在让我的项目在IE11和Edge上运行时遇到了一些麻烦

您可以在此处查看：

问题

IE11:空白页，显示多个错误：

SCRIPT1002: Syntax error
firebase-app.js (1,1)
SCRIPT1002: Syntax error
firebase-analytics.js (1,1)
SCRIPT1002: Syntax error
init.js (1,1)
SCRIPT5043: Accessing the 'caller' property of a function or arguments object is not allowed in strict mode
eval code (3959) (15268,9)
SCRIPT5022: SecurityError
sockjs.js (1684,3)

Edge:加载网站，但网站却乱七八糟。例如，网格不工作，我的旋转木马不工作。还显示了一些错误：

SCRIPT65535: SCRIPT65535: Invalid calling object

我到目前为止所做的事情

我试图确保巴贝尔将polyfill，我甚至不知道它是否这样做，老实说，我遵循了他们网站上的文档，我认为它不起作用

我还尝试添加

transpileDependencies:['vue-mq'，'vue carousel'，'firebase'，'vue lazyload video']

来填充我的插件，但我认为这也没什么用

我还添加了一个autoprefixer，我相信它可以工作，因为SCSS到CSS输出现在包含了所有的前缀，那么为什么它不能在EDGE中工作呢？我不知道。在Edge中检查它时会发现它有前缀，有时只是禁用前缀并将其重新放回即可修复它，所以我非常困惑

以下是我的配置文件：

babel.config.js

webpack.config.js

vue.config.js

梅因酒店

postss.config.js

package.json

tsconfig.json

---

很抱歉，你不能在IE中呈现一个基于JS框架（VUE、ReactJS等）的网站，Edge的JS引擎（非chromium）也不能处理ES6标准的所有功能。如果客户希望在基于Microsoft的浏览器上使用您的网站，那么他们必须切换到基于Chromium的最新Edge。

没有帮助（对不起），但正确答案是：因为他们很烂。知道你并不孤单：我们都去过那里。@JaredSmith你是说我的网络应用还是浏览器哈哈？我是网络开发新手，所以我的网站确实很烂。就浏览器而言，是的，他们确实如此，我“我很想尝试修复Edge问题，离开IE11，因为它会害死我。你可以在你的web应用上声明它在Edge和IE 11中不能正常工作。@一定要挤压浏览器。我不知道你的web应用程序，但修复它要比修复一个几乎有十年历史的web浏览器容易得多。很好的建议。。。但也许这应该在评论中，我认为这是一条诚实的道路。谢谢你的帮助！

module.exports = {
    presets: [
        ['@vue/app', {
            polyfills: [
                'es.promise',
                'es.symbol'
            ]
        }]
    ]
};

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                { loader: 'css-loader', options: { importLoaders: 1 } },
                'postcss-loader'
            ]
        }],
        vue: {
            // configure autoprefixer
            autoprefixer: {
                browsers: ['last 2 versions']
            }
        }
    }
}

// vue.config.js
module.exports = {
    transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video']
}

import "core-js/stable";
import "regenerator-runtime/runtime";
require('intersection-observer');
import "regenerator-runtime/runtime";
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@fortawesome/fontawesome-free/css/all.css";
import VueMq from "vue-mq";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import VueCarousel from "vue-carousel";
import "animate.css/animate.css";
import * as firebase from "firebase";
import VueLazyLoadVideo from "vue-lazyload-video";
require("intersection-observer");
require("matchmedia-polyfill");
require("matchmedia-polyfill/matchMedia.addListener");
import "lazysizes";
import "lazysizes/plugins/parent-fit/ls.parent-fit";
import "lazysizes/plugins/blur-up/ls.blur-up";

// Register Components
// LazyVideo & LazyVideoAsGIF
Vue.use(VueLazyLoadVideo);

const firebaseConfig = {
  HIDDEN CONFIG FOR STACKOVERFLOW
};

firebase.initializeApp(firebaseConfig);

Vue.use(VueCarousel);

gsap.registerPlugin(ScrollTrigger);

Vue.use(VueMq, {
  breakpoints: {
    // default breakpoints - customize this
    sm: 480,
    md: 921,
    lg: 1024
  }
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

module.exports = {
    plugins: [
        require('autoprefixer')({})
    ]
};

{
    "name": "tag",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@firebase/polyfill": "^0.3.36",
        "@fortawesome/fontawesome-free": "^5.13.0",
        "animate.css": "^4.1.0",
        "axios": "^0.19.2",
        "core-js": "^3.6.5",
        "firebase": "^7.15.5",
        "gsap": "^3.4.0",
        "intersection-observer": "^0.11.0",
        "lazysizes": "^5.2.2",
        "matchmedia-polyfill": "^0.3.2",
        "uuid": "^8.2.0",
        "vue": "^2.6.11",
        "vue-carousel": "^0.18.0",
        "vue-class-component": "^7.2.3",
        "vue-lazyload-video": "^0.1.15",
        "vue-mq": "^1.0.1",
        "vue-property-decorator": "^8.4.2",
        "vue-router": "^3.2.0",
        "vuex": "^3.4.0"
    },
    "devDependencies": {
        "@babel/preset-env": "^7.10.4",
        "@typescript-eslint/eslint-plugin": "^2.33.0",
        "@typescript-eslint/parser": "^2.33.0",
        "@vue/cli-plugin-babel": "^4.4.6",
        "@vue/cli-plugin-eslint": "~4.4.0",
        "@vue/cli-plugin-router": "~4.4.0",
        "@vue/cli-plugin-typescript": "~4.4.0",
        "@vue/cli-plugin-vuex": "~4.4.0",
        "@vue/cli-service": "~4.4.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "@vue/eslint-config-typescript": "^5.0.2",
        "autoprefixer": "^9.8.5",
        "cssnano": "^4.1.10",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-vue": "^6.2.2",
        "fork-ts-checker-webpack-plugin": "^5.0.5",
        "google-auth-library": "^6.0.5",
        "node-sass": "^4.12.0",
        "postcss-import": "^12.0.1",
        "postcss-load-config": "^2.1.0",
        "postcss-loader": "^3.0.0",
        "postcss-preset-env": "^6.7.0",
        "prettier": "^1.19.1",
        "sass-loader": "^8.0.2",
        "sugarss": "^2.0.0",
        "typescript": "~3.9.3",
        "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended",
            "@vue/typescript/recommended",
            "@vue/prettier",
            "@vue/prettier/@typescript-eslint"
        ],
        "parserOptions": {
            "ecmaVersion": 2020
        },
        "rules": {}
    },
    "browserslist": [
        "last 1 version",
        "> 1%",
        "IE 10"
    ]
}

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "strict": false,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}