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 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题