Vue实现预渲染—@prerenderer/webpack-plugin

前段时间，用Vue框架给公司做了个官网，以为做出来就完事了？不不不，老板开会再三强调要做好SEO优化工作，我说已经加了标题、关键词、描述这些，哒咩，老板说这是基本的，的进一步去做SEO优化，让搜索引擎能够抓取到网页信息。那么紧接着问题就来了。

Vue为什么要做SEO优化？

旧官网是纯静态的，用PHP写的页面，每个页面都是一个html，页面内的各个元素标签都可以被爬取到。新官网是用Vue写的，Vue的本质就是一套js框架。爬虫在爬取过程中，不会去执行js，所以在vue中配置的路由跳转也不会获取到，用Vue开发SPA单页面应用，最终打包生成只有一个html页面，搜索引擎也只会收录index.html这一个页面。

Vue项目怎么做SEO优化呢？

谷歌有介绍js的SEO优化：了解 JavaScript SEO 基础知识 | Google 搜索中心  |  文档  |  Google for Developers

两种方案分别为服务端渲染和预渲染。旧官网使用PHP写的，采用的是服务端渲染，在服务器把页面渲染成HTML字符串，然后将渲染好的页面给客户端浏览器，搜索引擎可直接进行解析。想做好SEO优化，服务端渲染是首选。但是这里我们的项目已经进入收尾阶段了，所以退而求其次我们选择了预渲染。

预渲染：

利用webpack构建工具打包生成静态的HTML直接给浏览器渲染。当应用存在大量路由、动态内容时，不适用预渲染。

这里我利用新发布的@prerenderer/webpack-plugin插件实现预渲染。参考配置如下：@prerenderer/webpack-plugin - npm (npmjs.com)

postProcess配置项可以动态修改打包后的页面标题、关键词、描述。

const path = require('path');
const PrerendererWebpackPlugin = require('@prerenderer/webpack-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
            new PrerendererWebpackPlugin({
                staticDir: path.join(__dirname, 'dist'),
                routes: [ '/cn', '/en', '/cn/about', '/en/about'],
                renderer: '@prerenderer/renderer-puppeteer',
                rendererOptions: {
                    inject: {
                        foo: 'bar'
                    },
                    renderAfterDocumentEvent: 'render-event',
                },
                postProcess: function (context) {
                    var titles = {
                        '/cn': {
                            title: 'xxx',
                            keywords: 'xxx',
                            description: 'xxxxxxxxxxxxxxxxxxxxxxxxx'
                        },
                        '/en': {
                            title: 'xxx',
                            keywords: 'xxx',
                            description: 'xxxxxxxxxxxxxxxxxxxxx'
                        },
                        '/cn/about': {
                            title: 'xxx',
                            keywords: 'xxx',
                            description: 'xxxxxxxxxxxxxxxx'
                        },
                        '/en/about': {
                            title: 'xxx',
                            keywords: 'xxx',
                            description: 'xxxxxxxxxxx'
                        },
                    }
                    context.html = context.html.replace(
                        /<title>[^<]*<\/title>/i,
                        '<title>' + titles[context.route].title + '</title>'
                    )
                    context.html = context.html.replace(
                        /<meta name="keywords" content="[^"]*"/i,
                        '<meta name="keywords" content="' + titles[context.route].keywords + '"'
                    );
                    context.html = context.html.replace(
                        /<meta name="description" content="[^"]*"/i,
                        '<meta name="description" content="' + titles[context.route].description + '"'
                    )
                }
            })
        ]
    }
}

查看打包后的网页，包含了动态修改后的标题、关键词和描述。