使用Edge浏览器查看空白显示

问题描述

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

使用Edge浏览器（v44.19041.423.0）在本地访问Web应用程序时，它也可以正常工作。

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

SCRIPT5022: SCRIPT5022: Expected identifier,string or number

从这里阅读不同的文章以及这里的vuetify文档中： https://vuetifyjs.com/en/getting-started/browser-support/#vue-cli

我在transpileDependencies: ['vuetify']中添加了vue.config.ts

我还在main.ts文件中将这些导入用于polyfills /兼容性：

import 'core-js/stable'

import 'regenerator-runtime/runtime'

import vuetify from './plugins/vuetify'

这些解决方案都不能解决使用Edge时的空白显示问题。

还要注意的一件事是，使用“ Edge Insider”浏览器，应用程序可以正常显示。

由于Edge在本地开发环境中工作正常，我怀疑我可能缺少与构建过程相关的配置吗？

任何见解表示赞赏：）

解决方法

以下是解决我在Edge上的显示问题的原因：

在"regenerator-runtime": "^0.13.7"中添加package.json依赖项

在"core-js": "^3.6.0"中添加package.json依赖项

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

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

在@babel/preset-env中添加babel.config.ts，如下所示：

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