我有一个用 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"
}
按照 Bootstrap-Vue 文档的建议，我的 app.js 文件在顶部包含以下内容:
import '@babel/polyfill'
import 'intersection-observer' // Optional
我还尝试在我的网站的头部部分添加来自 polyfill.io 的脚本标记。
所有结果都会导致黑屏，并出现 SCRIPT1002 语法错误和 SCRIPT5007 对象预期错误。我不确定我哪里出了问题，不幸的是我真的需要让它适用于 IE11。我的 Vue 组件在 Blade 文件中都不是自动关闭的，如此处类似问题中的回答。而且我没有使用 Vue CLI。
最佳答案
所以我决定删除所有组件和插件，看看 Vue 和 Bootstrap-Vue 是否可以在 IE11 中独立运行。它运行良好，我在控制台中收到了常见的 Vue 开发消息。
然后我一一添加每个模块，直到网站不再在 IE11 中呈现。仅当启用 lottie-vuejs 时才会发生这种情况，并且在检查控制台时会显示语法错误(预计为“}”。
所以我的项目无法运行的原因是这个插件。
关于laravel - 如何正确设置 polyfill，以便我的 Vue.JS 网站可以在 Internet Explorer 11 上运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59864162/