Я использую предварительно обработанный контент для показа пользователям до того, как приложение было визуализировано Vuejs.Я замечаю, что проблема с квазар-фреймворком при первой загрузке заключается в мерцании белого пустого содержимого.
Это шаги воспроизведения:
- Подготовка: использовать инструмент разработчика Chromeдля имитации медленной сети 3G, затем откройте панель «Элемент» для проверки DOM
- Введите URL-адрес моего сайта и просмотрите DOM: в вашем index.html есть q-приложение с предварительно обработанным содержимым:
<div id="q-app">
<h1>My prerender content here</h1>
</div>
[bad] Следующие несколько секунд, когда файлы app..js + vendor..js были загружены, квазар запустится и изменит DOM на (только HTML-тег комментария внутри):
<div id="q-app">
<!---->
</div>
И мой экран теперь был совершенно белым пустым.
Наконец, через несколько секунд приложение квазара было перерисовано:
<div id="q-app">
<div class="q-layout">
... This is rendered content ...
</div>
</div>
Как я тестировал: время между шагом 3 и шагом 4 составляет ~ 1 сБыстрое моделирование 3G и> 600 мс на родном андроиде / ios.Он показывает белый пустой экран в то время.
Я протестировал другой проект Vue-Cli, и у него не было шага 3.Нет проблем.
Так как мне удалить шаг 3 в квазаре?