Vue js Источник просмотра страницы не читается - PullRequest
Новая
       3

Vue js Источник просмотра страницы не читается

0 голосов
/ 13 марта 2020

Как мы можем заменить тег компонента для отображения HTML кода в view-source? 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="JDhrGe3ZRLyJxubtyNLnjqDEedb70f62Z2S6Y93C">

    <title>Laravel</title>    

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="http://localhost/laravel_vue/public/css/app.css" rel="stylesheet">
</head>
<body>
    <div id="app">
      <example-component></example-component> // Need html code here
    </div>

    <!-- Scripts -->
    <script src="http://localhost/laravel_vue/public/js/app.js" defer></script>
</body>
</html>

Я хочу отобразить код Html от имени тега компонента.

Ответы [ 2 ]

1 голос
/ 14 марта 2020

Функция «Просмотр источника страницы» в веб-браузерах отображает только исходный документ HTML, полученный с сервера. Одностраничные приложения (SPA) интенсивно используют JavaScript для изменения DOM по сравнению с тем небольшим содержимым, которое изначально имел документ HTML.

Я не знаю ни одной функции для отображения «визуализированного» источника страницы за исключением следующего:

  • Откройте инструменты разработчика и используйте Инспектор для просмотра текущего состояния дерева DOM. Отсюда вы можете скопировать внешний HTML элемента <html> в буфер обмена, если вы хотите извлечь его.
  • Существует расширение View Rendered Source Chrome, которое выглядит делать то, что вы хотите (не проверено).
0 голосов
/ 14 марта 2020

Попробуйте использовать nuxt , который служит для чтения html файлов при создании и обслуживании vue приложений. Вы также можете установить vue devtools для веб-браузера, затем просто нажмите Ctrl + Shift + J и выберите Vue. Стоит отметить, что vue devtools работает только на сервере dev.

...