使用 Edge 浏览器 Vuetify 空白显示

Posted 2023-03-24

【中文标题】使用 Edge 浏览器 Vuetify 空白显示

【英文标题】：Vuetify blank display using the Edge browser

【发布时间】：2020-10-07 15:38:43

【问题描述】：

我使用 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

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

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

import 'core-js/stable'

import 'regenerator-runtime/runtime'

import vuetify from './plugins/vuetify'

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

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

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

任何见解表示赞赏:)

【问题讨论】：

如果可能的话，您能否分享一些发生此错误的代码？这可能有助于找到问题的原因。如果您没有安装@vue/cli-plugin-babel，那么我建议您安装它。在babel.config.js 中定义设置。然后将transpileDependencies: ['vuetify'] 添加到vue.config.js 文件中。 Helpful discussion

【参考方案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' ]]