使用 Edge 浏览器验证空白显示

Question

我的 VueJS (v2.6.12) 应用程序（使用 vuecli 设置）使用 vuetify v2.0.7 运行在本地 Firefox/Chrome 以及构建和部署应用程序时顺利运行。

当使用 Edge 浏览器 (v44.19041.423.0) 在本地访问 Web 应用程序时，它也工作正常。

问题是当我访问应用程序并使用 Edge 浏览器构建和部署时，我在控制台中收到此错误并且显示完全空白：

SCRIPT5022: SCRIPT5022: Expected identifier, string or number

我在 vue.config.ts

中添加了 transpileDependencies: ['vuetify']

我也在我的 main.ts 文件中为 polyfills/compatibility 使用这些导入：

import 'core-js/stable'

import 'regenerator-runtime/runtime'

import vuetify from './plugins/vuetify'

None 这些解决方案解决了使用 Edge 时的空白显示问题。

还需要注意的一件事是，使用“Edge Insider”浏览器时应用程序显示良好。

由于 Edge 在本地开发环境中运行良好，我怀疑我可能缺少与构建过程相关的配置？

任何见解表示赞赏:)

Answer 1

以下是解决我在 Edge 上的显示问题的方法：

在package.json

中添加"regenerator-runtime": "^0.13.7"依赖

在package.json

中添加"core-js": "^3.6.0"依赖

确保这两行位于 main.ts 的顶部：

import 'core-js/stable'
import 'regenerator-runtime/runtime'

像这样在 babel.config.ts 中添加 @babel/preset-env：

module.exports = {
  presets: [['@babel/preset-env'], ['@vue/app', { useBuiltIns: 'entry' }]]
}

Vuetify blank display using the Edge browser