时间戳

首页 > 解决方案 > 使用 Edge 浏览器 Vuetify 空白显示

vue.js - 使用 Edge 浏览器 Vuetify 空白显示

问题描述

我使用 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 在本地开发环境中运行良好，我怀疑我可能缺少与构建过程相关的配置？

任何见解表示赞赏:)

标签： vue.jsvuetify.jsmicrosoft-edgetranspiler

解决方案

这是解决我在 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' }]]
}

推荐阅读