如何正确设置 polyfill，以便我的 Vue.JS 网站在 Internet Explorer 11 上运行？答案

【问题标题】：How can I set up polyfills correctly so that my Vue.JS website works on Internet Explorer 11?如何正确设置 polyfill，以便我的 Vue.JS 网站在 Internet Explorer 11 上运行？
【发布时间】：2020-05-08 21:00:34
【问题描述】：

我有一个使用 Laravel 和 Vue.JS 构建的项目（也使用 Bootstrap-Vue）。在包括 Edge 在内的所有浏览器上一切正常。但正如你猜到的那样，IE11 中没有。

我尝试了各种使用 babel/polyfills 的配置。

在我的 webpack.mix.js 我有以下代码：

let mix = require('laravel-mix');

require('laravel-mix-polyfill');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .polyfill({
        enabled: true,
        useBuiltIns: "entry",
        targets: { "firefox": "50", "ie": 11 }
    });

我的 package.json 文件中有以下依赖项：

"devDependencies": {
        "@babel/polyfill": "^7.8.3",
        "axios": "^0.18.1",
        "bootstrap": "^4.3.1",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "laravel-mix-polyfill": "^1.1.1",
        "lodash": "^4.17.5",
        "mutationobserver-shim": "^0.3.3",
        "node-sass": "^4.13.1",
        "popper.js": "^1.12",
        "portal-vue": "^2.1.4",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.10",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@chenfengyuan/vue-qrcode": "^1.0.1",
        "bootstrap-vue": "^2.2.0",
        "current-device": "^0.9.1",
        "intersection-observer": "^0.7.0",
        "lottie-vuejs": "0.3.6",
        "moment": "^2.24.0",
        "v-mask": "^2.0.2",
        "vue-autosuggest": "1.8.3",
        "vue-js-toggle-button": "^1.3.3",
        "vue-recaptcha": "^1.2.0",
        "vue-social-sharing": "^2.4.7",
        "vue2-flip-countdown": "^0.9.3",
        "vuelidate": "^0.7.4"
    }

我的 app.js 文件在顶部有这个，这是 Bootstrap-Vue 文档推荐的：

import '@babel/polyfill'
import 'intersection-observer' // Optional

我还尝试在我网站的 head 部分添加来自 polyfill.io 的脚本标签。

所有结果都会导致空白屏幕出现 SCRIPT1002 语法错误和 SCRIPT5007 对象预期错误。我不确定我哪里出错了，不幸的是我真的需要让它为 IE11 工作。我的 Vue 组件都没有在刀片文件中自动关闭，正如在此处的类似问题中所回答的那样。而且我没有使用 Vue CLI。

【问题讨论】：

标签： laravel vue.js webpack internet-explorer-11 babel-polyfill

【解决方案1】：

所以我决定删除所有组件和插件，看看 Vue 和 Bootstrap-Vue 是否在 IE11 中独立工作。它运行良好，我在控制台中收到了通常的 Vue 开发消息。

然后我在每个模块中一一添加，直到网站不再在 IE11 中呈现。这仅在启用 lottie-vuejs 时发生，并且在检查控制台时会显示语法错误（预期为 '}''。

所以我的项目无法运行的原因是由于这个插件。

【讨论】：

感谢您发布此问题的解决方案。我建议您在可以标记的 48 小时后尝试将自己的答案标记为该问题的已接受答案。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。