为什么我的 vue web 应用程序在 IE11 中加载了一个空白页面，而在 Edge 中看起来已损坏? [英] Why does my vue web app load a blank page in IE11 and look broken in Edge?

查看：46 发布时间：2021/9/20 20:07:55 javascript vue.js webpack polyfills babel-polyfill

本文介绍了为什么我的 vue web 应用程序在 IE11 中加载了一个空白页面，而在 Edge 中看起来已损坏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

您可以在此处查看:https://tagfireandsecurity.co.uk/

<块引用>

问题

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

SCRIPT1002:语法错误firebase-app.js (1,1)SCRIPT1002:语法错误firebase-analytics.js (1,1)SCRIPT1002:语法错误init.js (1,1)SCRIPT5043:在严格模式下不允许访问函数或参数对象的调用者"属性评估代码 (3959) (15268,9)SCRIPT5022:安全错误sockjs.js (1684,3)

Edge:加载网站，但一切都搞砸了.例如，网格不工作，我的旋转木马也不工作.还显示了一些错误:

SCRIPT65535:SCRIPT65535:调用对象无效

<块引用>

到目前为止我做了什么

我试图确保 babel 会 polyfill，老实说我什至不知道它是否这样做，我遵循了他们网站上的文档，但我认为它不起作用.

我还尝试添加 transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video'] 来填充我的插件，但我没有'也不要认为那是在做任何事情.

我还添加了一个 autoprefixer，我相信这是有效的，因为 SCSS 到 CSS 输出现在包含所有前缀，那么为什么它在 EDGE 中不起作用?我不知道.在 Edge 中检查它显示它在那里有前缀，有时只是禁用前缀并重新打开它会修复它，所以我很困惑.

这是我的配置文件:

<块引用>

babel.config.js

module.exports = {预设:[['@vue/app', {填充物:['es.promise','es.symbol']}]]};

<块引用>

webpack.config.js

module.exports = {模块: {规则:[{测试:/\.css$/,用: ['样式加载器',{ loader: 'css-loader', 选项: { importLoaders: 1 } },'postcss-loader']}],视图:{//配置自动前缀自动前缀:{浏览器:['最后 2 个版本']}}}}

<块引用>

vue.config.js

//vue.config.js模块.出口 = {transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video']}

<块引用>

main.ts

import "core-js/stable";导入再生器运行时/运行时"；require('交叉观察者');导入再生器运行时/运行时"；从vue"导入 Vue；从./App.vue"导入应用程序；从./router"导入路由器；从./store"导入商店；导入@fortawesome/fontawesome-free/css/all.css"；从vue-mq"导入 VueMq；从gsap"导入{gsap}；从gsap/ScrollTrigger"导入{ScrollTrigger}；从vue-carousel"导入 VueCarousel；导入animate.css/animate.css"；import * as firebase from firebase";从vue-lazyload-video"导入 VueLazyLoadVideo；要求(交叉观察者")；要求(matchmedia-polyfill")；要求(matchmedia-polyfill/matchMedia.addListener")；导入lazysizes"；导入lazysizes/plugins/parent-fit/ls.parent-fit"；导入lazysizes/plugins/blur-up/ls.blur-up"；//注册组件//LazyVideo &LazyVideoAsGIFVue.use(VueLazyLoadVideo);const firebaseConfig = {堆栈溢出的隐藏配置};firebase.initializeApp(firebaseConfig);Vue.use(VueCarousel);gsap.registerPlugin(ScrollTrigger);Vue.use(VueMq, {断点:{//默认断点 - 自定义这个SM: 480,医学博士:921，lg: 1024}});Vue.config.productionTip = false;新的 Vue({路由器，店铺，渲染:h =>h(应用程序)}).$mount("#app");

<块引用>

postcss.config.js

module.exports = {插件: [要求('自动前缀')({})]};

<块引用>

package.json

<代码>{名称":标签"，版本":0.1.0"，私人":真的，脚本":{服务":vue-cli-service 服务"，构建":vue-cli-service 构建"，lint":vue-cli-service lint"},依赖关系":{@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"，交叉点观察者":^0.11.0"，懒惰":^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"},开发依赖":{@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"，自动前缀":^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"，节点-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"，更漂亮":^1.19.1"，sass-loader":^8.0.2"，糖":^2.0.0"，打字稿":~3.9.3"，vue-template-compiler":^2.6.11"},eslintConfig":{根":真，环境":{节点":真},扩展":[插件:vue/essential"，eslint:推荐"，@vue/typescript/推荐"，@vue/prettier"，@vue/prettier/@typescript-eslint"],解析器选项":{ecmaVersion":2020},规则":{}},浏览器列表":[最后一个版本"，>1%"，IE 10"]}

<块引用>

tsconfig.json

<代码>{编译器选项":{目标":esnext"，模块":esnext"，jsx":保留"，allowJs":真，严格":错误，importHelpers":真，模块分辨率":节点"，experimentalDecorators":真，esModuleInterop":真，allowSyntheticDefaultImports":真，sourceMap":真，baseUrl":."，类型":[webpack-env"],路径":{@/*":[源代码/*"]},库":[esnext"，dom"，dom.iterable"，脚本主机"]},包括":[src/**/*.ts",src/**/*.tsx",src/**/*.vue",测试/**/*.ts"，测试/**/*.tsx"],排除":[节点模块"]}

解决方案

很抱歉，您无法在 IE 中渲染使用基于 JS 的框架(VUE、ReactJS 等)构建的网站，以及 Edge 的 JS 引擎(non-chromium) 无法处理 ES6 标准的所有功能.如果客户想在基于 Microsoft 的浏览器上使用您的网站，那么他们必须切换到基于 Chromium 的最新 Edge.

I'm having a bit of trouble with getting my project to work on IE11 and Edge

You can view it here: https://tagfireandsecurity.co.uk/

THE PROBLEMS

IE11: Blank page, shows multiple errors:

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: Loads the website, however its all messed up. For example the grid is not working and my carousels aren't working. Also shows some errors:

SCRIPT65535: SCRIPT65535: Invalid calling object

WHAT I'VE DONE SO FAR

I tried to make sure babel will polyfill which I don't even know if it's doing it to be honest, I followed the documentation on their website and I don't think its working.

I also tried to add transpileDependencies: ['vue-mq', 'vue-carousel', 'firebase', 'vue-lazyload-video'] to polyfill my plugins but I don't think that is doing anything either.

I also added an autoprefixer and I believe that is working because the SCSS to CSS output now has all the prefixes in it, so why it's not working in EDGE? I don't know. Inspecting it in Edge shows it has the prefixes there, sometimes just disabling the prefix and putting it back on again fixes it so I'm very confused.

Here are my config files:

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

解决方案

Sorry to say this, you can't render a website built with JS based framework (VUE, ReactJS etc) in IE, and the JS engine of Edge (non-chromium) is not capable of handling all features of ES6 standard. If the customer wants to use your website on a Microsoft based browser, then they have to switch to the latest Edge based on Chromium.

这篇关于为什么我的 vue web 应用程序在 IE11 中加载了一个空白页面，而在 Edge 中看起来已损坏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

为什么我的 vue web 应用程序在 IE11 中加载了一个空白页面，而在 Edge 中看起来已损坏? [英] Why does my vue web app load a blank page in IE11 and look broken in Edge?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

为什么我的 vue web 应用程序在 IE11 中加载了一个空白页面，而在 Edge 中看起来已损坏? [英] Why does my vue web app load a blank page in IE11 and look broken in Edge?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭