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

Question

我在让我的项目在IE11和Edge上工作上遇到了一些麻烦

您可以在这里查看它：https://tagfireandsecurity.co.uk/

THE PROBLEMS

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)

边缘：加载网站，但它的所有混乱。例如，网格不起作用，我的传送带也不起作用。还显示了一些错误：

SCRIPT65535: SCRIPT65535: Invalid calling object

到目前为止我做了什么

我试着确保babel会填充我甚至不知道它是否是为了诚实，我跟踪了他们网站上的文件，我不认为它是有效的。

我还试图添加transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video']来填充我的插件，但我认为这也没有任何作用。

我还添加了一个自动修复程序，我相信这是有效的，因为CSS输出的SCSS现在有了所有的前缀，那么为什么它不能在边缘工作呢？我不知道。在Edge中检查它会发现它有前缀，有时只是禁用前缀，然后再重新安装它，所以我非常困惑。

这里是我的配置文件：

babel.config.js

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

webpack.config.js

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

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

main.ts

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");

postcss.config.js

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

package.json

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

tsconfig.json

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

Answer 1

很抱歉，您不能在IE中呈现一个基于JS框架(VUE，ReactJS等)的网站，而且JS引擎的边缘(无铬)无法处理ES6标准的所有功能。如果客户想要在微软的浏览器上使用您的网站，那么他们必须切换到最新的基于铬的边缘。