IE 11 或更低版本中的 Vue 应用程序空白页，即使使用 polyfill答案

【问题标题】：Vue app blank page in IE 11 or lower even with polyfillsIE 11 或更低版本中的 Vue 应用程序空白页，即使使用 polyfill
【发布时间】：2019-03-19 09:10:02
【问题描述】：

我有一个在 Firefox、Edge 和 Chrome 中运行的 Vue 应用程序，但是在 IE 11（或更低版本）中，我看到一个空白页面。在 IE 的控制台中可以看到类似 SCRIPT1002: Syntax error app.js 和 SCRIPT5022: SecurityError sockjs.js 的内容。

语法错误转到包含以下内容的行：eval("__webpack_require__.r(__webpack....Verry long string)。

安全错误转到包含以下内容的块：

var Driver = global.WebSocket || global.MozWebSocket;
if (Driver) {
    module.exports = function WebSocketBrowserDriver(url) {
        return new Driver(url); // Where this line is marked
    };
} else {
    module.exports = undefined;
}

经过一番研究，我发现这可能与缺少 polyfill 有关。所以我添加了import "@babel/polyfill"; 到main.ts 和presets: [["@vue/app", { useBuiltIns: "entry" }]] 到babel.config.js。但同样的错误出现在 IE 中。我尝试了https://cli.vuejs.org/guide/browser-compatibility.html 中描述的其他一些方法。但对我来说没有一个成功。

在这一点上，我完全一无所知，因为互联网上的类似问题都指向缺少 polyfill。

有关该应用的一些额外信息：

使用 Vue cli 3 创建
使用打字稿。
使用了一些新的 js 特性，比如Object.entries

更新：

再看一下错误，我发现 IE11 在我的应用程序中加载 vuex-persist 模块时出现问题。我正在继续搜索。

【问题讨论】：

标签： typescript vue.js internet-explorer-11 babeljs polyfills

【解决方案1】：

所以问题出在我使用的依赖项上。 vuex-persist 导致了这个问题。解决方法是在vue.config.js 中添加以下内容：

module.exports = {

/* ... other config ... */

  transpileDependencies: ['vuex-persist']

}

感谢：https://forum.vuejs.org/t/internet-explorer-11-script1002-blank-page-error/53327/5

【讨论】：