php - vue组件html元素渲染

我正在使用 Laravel 5.6 版和 vue.js 2.0 版开发一个多页面 Web 应用程序 (MPA)。

我正在使用多个 vue 组件，例如Demo.vue 并在 php Blade 文件中使用该组件。

问题是当我尝试查看页面 View 源代码 (ctrl+u) 时，它仅显示 php blade 文件中使用的 html 标记，但不显示 vue 组件的 HTML 元素。

我希望 Vue 组件 HTML 元素也显示在页面 View 源中，因为我的谷歌抓取主要依赖于使用的 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.log('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/

以上文章仅显示静态数据...

谢谢，查理兹

最佳答案

这是您在选择使用像 Vue 这样的响应式框架时面临的一个常见问题。问题是 HTML 本身并没有在初始页面加载时呈现，而是在事后由 javascript 填充，然后呈现给用户。您无法解决 Vue 组件的这个特殊问题，并且由于您使用的是动态数据，因此您无法缓存 HTML 本身。

然而，我过去成功使用的一种有趣的方法是在页面加载时实际呈现“占位符”HTML，它只是省略了动态数据，然后使用 v-show 或 v-if 方法切换占位符数据加载完成后的 HTML 和动态 HTML 数据。如果你不使用转换，这可能会导致一些闪烁，但如果你真的想让谷歌抓取那个 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 替换为您的 Vue生成的 HTML。谷歌将能够看到占位符中的任何内容，并且在加载后您仍然可以获得动态内容。这不是最好的答案，需要使用一些非常非 react 性的做法来获得结果，但请注意，这只是尝试为您提供可能适用于您的特定用例的答案。

在实现此方法时，您可能需要考虑在 Vue 组件本身中使用 include，它实际上调用占位符 HTML，这样您就不会重复自己，并且您只是在一个源位置更新静态 HTML。如果您需要，我可以为此提供更多帮助。

关于php - vue组件html元素渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53595406/

php - vue组件html元素渲染

上一篇：vue.js - 将 Cypress 与 vuetify 一起使用

下一篇：javascript - 使用watcher在Vue条件渲染中选择2