盡管 Babel Polyfill，Vue 無法在 IE11 中工作

Question

不幸的是，我最近的應用程序需要支持 Internet Explorer 11。這個要求讓我有些吃驚，所以我已經使用 Vue.js 構建了應用程序前端。 后端是用 Laravel 編寫的，因此我使用 laravel-mix/webpack。

這是我的app.js ：

require('./bootstrap');
window.Vue = require('vue');

顯然，IE11 不支持 Vue.js 所以我嘗試了以下轉譯/填充代碼的方法。

1.需要polyfill

方法：添加require("@babel/polyfill"); 到我的app.js的頂部，如https://babeljs.io/docs/en/babel-polyfill中所述

結果：在 IE 控制台中顯示以下錯誤消息：

SCRIPT1003：“：”預期

顯然是兼容性問題，因為 pre data(){}在 ES < 5 中無效

2. 使用 mix.babel

方法：將mix.babel(['resources/js/app.js'], 'resources/js/app.js')添加到我的webpack.mix.js中，如https://laravel.com/docs/5.8中所述/mix （我使用的是 laravel 5.8.36）。 我的webpack.mix.js現在看起來像這樣：

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js')
mix.babel(['resources/js/app.js'], 'resources/js/app.js')
mix.sass('resources/sass/app.scss', 'public/css');

結果：與1中相同的錯誤消息

3.使用混合擴展

方法：安裝此擴展程序： https://laravel-mix.com/extensions/polyfill並按照描述配置我的webpack.mix.js 。 我的webpack.mix.js現在看起來像這樣：

const mix = require('laravel-mix');
require('laravel-mix-polyfill');

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

結果：再次出現與1中相同的錯誤消息

4. 使用 babel-cli 手動編譯

方法：出於絕望，我嘗試使用以下命令手動轉換我的app.js ./node_modules/.bin/babel./public/js/app.js --out-dir./public/js/

結果：仍然沒有運氣，與1中的錯誤相同

我真的開始感到沮喪，所以非常感謝任何幫助。

Answer 1

如果你不能讓Babel-Polyfill工作，你可以嘗試使用Polyfill.io ，如果瀏覽器需要它們，它會自動填充選定的 Polyfill。

您需要做的就是 go Create a polyfill bundle頁面和 select 您需要的 polyfills。 然后，一旦你制作了你的包，復制頂部的 URL 並添加一個帶有 URL 的<script>標簽到你的head 。

我個人沒有將它與 Laravel 一起使用，但我之前曾與 babel-polyfill 進行過斗爭，最終使用了 Polyfill.io，因為我無法讓 babel-polyfill 工作。