Блог

Главная - Вопросы по программированию - Vuetify пустой дисплей с помощью пограничного браузера

Vuetify пустой дисплей с помощью пограничного браузера

#vue.js #vuetify.js #microsoft-edge #transpiler

#vue.js #vuetify.js #microsoft-edge #transpiler

Вопрос:

Мое приложение VueJS (версия v2.6.12) (настройка с помощью vuecli), использующее vuetify версии v2.0.7, работает бесперебойно в Firefox / Chrome локально, а также при сборке и развертывании приложения.

При доступе к веб-приложению в локальном режиме с использованием пограничного браузера (версия 44.19041.423.0) он тоже работает нормально.

Проблема в том, что когда я получаю доступ к приложению после его сборки и развертывания с помощью пограничного браузера, я получаю эту ошибку в консоли, и дисплей полностью пустой:

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 файле:

import 'core-js/stable'

import 'regenerator-runtime/runtime'

import vuetify from './plugins/vuetify'

Ни одно из этих решений не устраняет проблему с пустым отображением при использовании Edge.

Также следует отметить, что приложение отлично отображается в браузере Edge Insider.

Поскольку Edge отлично работает в локальной среде разработки, я подозреваю, что, возможно, мне не хватает конфигурации, связанной с процессом сборки?

Любые идеи приветствуются 🙂

Комментарии:

1. Если возможно, не могли бы вы поделиться каким-нибудь кодом, в котором возникает эта ошибка? Это может помочь найти причину проблемы. Если вы не установили @vue/cli-plugin-babel , я предлагаю вам установить его. Определите настройки в babel.config.js . Затем добавьте transpileDependencies: ['vuetify'] в vue.config.js файл. Полезное обсуждение

Ответ №1:

Вот что решило мою проблему с отображением на Edge:

Добавить "regenerator-runtime": "^0.13.7" зависимость в package.json

Добавить "core-js": "^3.6.0" зависимость в package.json

Убедитесь, что эти 2 строки находятся в верхней части 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' }]]
}