Компонент vue html рендеринг elemnet
Я разрабатываю многостраничное веб-приложение (MPA) с использованием Laravel версии 5.6 с vue.js версии 2.0.
Я использую несколько компонентов vue, например. Demo.vue и используя этот компонент в файле лезвия php.
Проблема в том, что когда я пытаюсь увидеть источник просмотра страницы (ctrl + u), он показывает только теги html, используемые в файле лезвия php, но не отображает элементы HTML компонента vue.
Я хочу, чтобы HTML-элементы компонента Vue также отображались в источнике просмотра страницы, поскольку мой поиск в Google в значительной степени зависит от используемых компонентов vue. Не могли бы вы помочь мне в этом вопросе?
Также прилагаем скриншоты источника страницы и фрагмент кода для этого примера.
Код файла Demo.vue
<template> <div class = "container"> <div class = "row justify-content-center"> <div class = "col-md-8"> <div class = "card card-default"> <div class = "card-header">Example Component</div> <div class = "card-body"> I'm an example component. </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.info('Component mounted.') } } </script>App.js
require('./bootstrap'); window.Vue = require('vue'); window.axios = require('axios'); import VModal from 'vue-js-modal'; Vue.use(VModal); Vue.component('demo-component', require('./components/Demo.vue')); const app = new Vue({ el: '#app', });Layout.blade.php
<!DOCTYPE html> <html lang = "{{ app()->getLocale() }}"> <head> <meta charset = "UTF-8"> <meta http-equiv = "X-UA-Compatible" content = "ie=edge"> <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <form method = "POST" action = "path_to_action"> <meta name = "csrf-token" content = "{{ csrf_token() }}"> </form> <!--<link href = "css/style.css" rel = "stylesheet">--> <link href = "https://fonts.googleapis.com/css?family=Roboto:300,500,700,900" rel = "stylesheet"> <link href = "/css/app.css" rel = "stylesheet" type = "text/css"> </head> <body id = "body"> <div class = "content" id = "app"> <demo-component></demo-component> </div> <script type = "text/javascript" src = "/js/app.js"></script> </body> </html>
т.е. мы хотим, чтобы HTML-код отображался в источнике представления.
Мы даже пытались проверить различные статьи по SSR, но эти примеры показаны с использованием статического контента, тогда как наши данные динамически поступают из базы данных и представляют собой многостраничное приложение.
например Мы попробовали следующий подход: -
https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/
Вышеупомянутая статья показана только для статических данных ...
Спасибо, Шарлиз
Почему вы хотите этого добиться? Есть ли какие-либо преимущества для отображения визуализированного HTML в исходном коде?
Ответы 1
Это распространенная проблема, с которой вы сталкиваетесь, решая использовать реактивный фреймворк, такой как Vue. Проблема в том, что сам HTML не отображается во время начальной загрузки страницы, а заполняется javascript постфактум, а затем отображается для пользователя. Вы не можете обойти эту конкретную проблему с компонентами Vue, и поскольку вы используете динамические данные, вы не можете кэшировать сам HTML.
Однако интересный подход, который я успешно использовал в прошлом, заключается в том, чтобы фактически отображать HTML-заполнитель при загрузке страницы, который просто пропускает динамические данные, а затем использовать метод v-show или v-if для переключения HTML-заполнителя и динамические данные HTML после завершения загрузки данных. Если вы не используете переходы, это может привести к миганию, но если вы ДЕЙСТВИТЕЛЬНО хотите, чтобы Google сканировал этот HTML-код, и вам действительно нужно использовать Vue, то это хорошее решение. Упрощенный пример будет примерно таким:
<div v-show = "loaded">
<example-component></example-component>
</div>
<div id = "placeholder">
<div>
Hello, Google Bot!
</div>
</div>
Затем вы должны изменить значение переменной «loaded» на true, когда ваш компонент смонтирован, и передать его родительскому элементу с эмиттером, а также использовать javascript, чтобы скрыть исходный div, тем самым заменив HTML-заполнитель HTML-кодом, сгенерированным Vue. Google сможет увидеть все, что было в заполнителе, и вы все равно получите динамический контент после его загрузки. Это не самый красивый из ответов, и для достижения результата требуется использовать некоторые очень нереактивные методы, но обратите внимание, что это всего лишь попытка дать вам ответ, который может сработать для вашего конкретного варианта использования.
При реализации этого метода вы можете рассмотреть возможность использования включений в самом компоненте Vue, которые фактически вызывают HTML-заполнитель, чтобы вы не повторялись, и вы обновляете статический HTML только в одном исходном местоположении. Я могу оказать вам дополнительную помощь, если вам это потребуется.
Это наименее важная часть моего ответа, просто напоминающая вам использовать принципы DRY и повторно использовать код там, где это возможно.
Вы перекомпилировали файл
App.js? Есть ли ошибки в консоли вашего браузера?