> 原创文章 > vue解决seo的优化,单页面seo优化,预渲染prerender-spa-plugin

vue解决seo的优化,单页面seo优化,预渲染prerender-spa-plugin

原创文章 hmin 2020-11-03 16:33:36 99 阅读 1 评论

简介 众所周知,单页面对SEO并不是很友好,而且现在的三大主流框架都为单页面,为了解决单页面应用不利于SEO,给出了一个解决方案prerender-spa-plugin预渲染插件。

一. 安装插件 

    npm install prerender-spa-plugin --save

    如果安装失败,请使用国内淘宝镜像安装



二. 配置

    1.  路由需要设置成history模式

        var router = new VueRouter({

            mode: 'history',

        })

        完整代码

image.png

    

    2.  在vue.config.js添加以下代码   

    const PrerenderSPAPlugin = require('prerender-spa-plugin');

    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

    const path = require('path');


    module.exports = {

        configureWebpack: config => {

            if (process.env.NODE_ENV !== 'production') return;

            return {

             plugins: [

                    new PrerenderSPAPlugin({

             staticDir: path.join(__dirname, 'dist'),

             routes: ['/', '/joinUs'],

                        captureAfterTime: 10000,

                        renderer: new Renderer({

             inject: {

                                foo: 'bar'

                            },

                            headless: false,

                            renderAfterDocumentEvent: 'render-event',

                            maxConcurrentRoutes: 50

                       })

                    }),

                ],

            };

        },

    }

    vue.config.js完整代码

image.png


    3.  在main.js文件添加以下代码

         mounted () {

                document.dispatchEvent(new Event('render-event'))

         }

main.js完整代码

image.png


    4.  运行 npm run build,看看生成的dist文件夹有没有在对应vue.config.js设置的路由文件,在编辑器里打开每个生成的文件夹里的index.html,看看内容是否准确。

image.png


*可以配合vue-meta-info来对每个页面的title,keyword,description作不同的设置

文章评论

  • hmin

    写的不错,赞一个!
    2020-11-03 17:24:30