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

douzi7219
douzi7219 你为什么要这样做?在视图源中显示呈现的HTML有什么好处吗?
接近 2 年之前 回复
dtddjq9637
dtddjq9637 你有没有透露App.js文件?您的浏览器控制台中是否有任何错误?
接近 2 年之前 回复

1个回答

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.

duanjing4667
duanjing4667 这是我答案中最不重要的部分,只是提醒您使用DRY原则并尽可能重用代码。
接近 2 年之前 回复
doutang2017
doutang2017 考虑在Vue组件本身中使用包含实际调用占位符HTML的我没有得到(实际上如何实现句子)你想说什么。你能解释一下吗?
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐