Question

我正在使用Laravel 5.6版和vue.js 2.0版开发多页Web应用程序（MPA）。

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

问题是当我尝试查看页面视图源（ctrl + u）时，它仅显示php刀片文件中使用的html标签，但不显示vue组件的HTML元素。

我希望Vue组件HTML元素也显示在页面视图源中，因为我的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.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/

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

谢谢，查理兹（Charlize）

Answer 1

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

但是，我过去成功使用的一种有趣的方法是在页面加载时实际呈现“占位符” 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，从而用Vue替换占位符HTML生成的HTML。 Google可以看到占位符中的内容，并且在加载动态内容后仍然可以获取。这不是最漂亮的答案，并且需要使用一些非反应性的方法来获得结果，但是请注意，这只是为您提供一个可能适合您特定用例的答案的尝试。

在实现此方法时，您可能需要考虑在Vue组件本身中使用包含实际调用占位符HTML的包含，以便您不再重复自己，而只在一个源位置中更新静态HTML。如果您需要，我可以提供更多帮助。

Vue组件html elemnet渲染

1 个答案: