dongmi4809 2018-12-03 14:02
浏览 204

vue组件html元素渲染

I am developing a multi-page web application (MPA) using Laravel version 5.6 with vue.js version 2.0.

I am using multiple vue components e.g. Demo.vue and using that component in php blade file.

The issue is when I try to see the page view source (ctrl+u) it shows only html tags used in php blade file but doesn't show vue component's HTML elements.

I want the Vue component HTML elements also to be shown in page view source since my google crawling is majorly dependent on vue components used. Could you help me out for this issue?

Also attaching the screenshots of the page source and example code snippet for the same.

  • Demo.vue file code

    <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>
    

i.e. We want the HTML code of to be rendered in view source.

We even tried to check various articles on SSR, but those examples are shown using static content, whereas our data is dynamic coming from database and is a multi-page application.

e.g. We tried below approach :-

https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/

The above article is showing for static data only...

Thanks, Charlize

  • 写回答

1条回答

  • duancenxiao0482 2018-12-03 15:50
    关注

    This is a common problem that you face by choosing to use a reactive framework like Vue. The problem is that the HTML itself is not rendered at the time of initial page load, but populated by javascript after the fact and then rendered to the user. You can not get around this particular problem with Vue components and since you are using dynamic data, you can not cache the HTML itself.

    However, an interesting approach that I have used successfully in the past is to actually render "placeholder" HTML on page load that simply omits the dynamic data, and then use the v-show or v-if method to toggle the placeholder HTML and the dynamic HTML data once the data finishes loading. If you don't use transitions, this can lead to some flashing, but if you REALLY want to have google crawl that HTML, and you really need to use Vue, then this is a good solution. A simplified example would be something like this:

    <div v-show="loaded">
        <example-component></example-component>
    </div>
    <div id="placeholder">
        <div>
            Hello, Google Bot!
        </div>
    </div>
    

    You would then change the value of the "loaded" variable to true when your component is mounted and pass it to the parent with an emitter, while also using javascript to hide the original div, thus replacing the placeholder HTML with your Vue generated HTML. Google would be able to see whatever was in the placeholder, and you still get the dynamic content once it loads. This is not the prettiest of answers, and requires using some very non-reactive practices to achieve the result, but please note that it's just an attempt to give you an answer that might work for your particular use case.

    While implementing this method, you may want to consider using includes within the Vue component itself that actually call the placeholder HTML so that you don't repeat yourself, and you are only updating the static HTML in one source location. I can give more help with this if you require it.

    评论

报告相同问题?

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器