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

Question

我的VueJS (v2.6.12)应用程序(使用vuecli安装)使用vuetify v2.0.7，在本地的火狐/Chrome中运行顺畅，在构建和部署应用程序时也是如此。

当使用Edge浏览器(v44.19041.423.0)在本地访问web应用程序时，它也工作得很好。

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

SCRIPT5022: SCRIPT5022: Expected identifier, string or number

通过阅读这里和这里的证明文档中的不同帖子：https://vuetifyjs.com/en/getting-started/browser-support/#vue-cli

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

我还在我的main.ts文件中使用这些导入来实现多边形填充/兼容性：

import 'core-js/stable'

import 'regenerator-runtime/runtime'

import vuetify from './plugins/vuetify'

这些解决方案都不能解决使用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' }]]
}