vue SEO和服务端渲染

Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，下面列出几种最近研究和使用过的SEO方案，SSR和静态化基于Nuxt.js来说。

1、SSR服务器端渲染
2、静态化
3、预渲染prerender-spa-plugin + vue-meta／vue-meta-info
4、使用Phantomjs针对爬虫做处理

SSR服务器端渲染

对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。

npm install vue vue-server-renderer express --save

完整代码

const Vue = require('vue');
const server = require('express')();

const template = require('fs').readFileSync('./index.template.html', 'utf-8');

const renderer = require('vue-server-renderer').createRenderer({
  template,
});

const context = {
    title: 'vue ssr',
    metas: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue srr demo">
    `,
};

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`,
  });

  renderer
  .renderToString(app, context, (err, html) => {
    console.log(html);
    if (err) {
      res.status(500).end('Internal Server Error')
      return;
    }
    res.end(html);
  });
})

server.listen(8080);

静态化

静态化是Nuxt.js打包的另一种方式，算是 Nuxt.js 的一个创新点，页面加载速度很快。
优势

• 纯静态文件，访问速度超快
• 对比SSR，不涉及到服务器负载方面的问题
• 静态网页不易遭到攻击。安全性更高

不足

• 如果动态路由参数多的话是不适用的。

预渲染 prerender-spa-plugin

如果你只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

yarn add prerender-spa-plugin

vue-cli3 vue.config.js的配置

configureWebpack: config => { 
        if (process.env.NODE_ENV !== 'production') { return false }
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname, 'dist'),
                    routes: ['/','/list'],
                    
                    renderer: new Renderer({
                        inject: {
                            foo: "bar"
                        },
                       
                        headless: false,
                        // renderAfterDocumentEvent: 'render-event',
                    })
                })
            ]
        }
    }

在 main.js 中添加

new Vue({
      router,
      render: h => h( app ),
      mounted () {
            document.dispatchEvent( new Event( 'render-event' ) )
      }
}).$mount('#app')

注意 ： router中必须设置 mode: history

prerender-spa-plugin 和 vue-meta-info配合使用

import MetaInfo from "vue-meta-info"

js 代码

metaInfo: {
        title: "",
        meta: [
            { name: "title", content: "" },
            { name: "description", content: "" },
            { name: "keywords", content:  "" }
        ],
        link: [{ rel: "asstes",href: "https://assets-cdn.github.com/" }]
    },

打包出来可以看见文件，打包出文件夹/index.html ，例如：about => about/index.html ，里面有html内容。
优势

• 改动小，引入插件就可以了。

不足

• 无法是用动态路由。
• 只适合少量页面的项目。页面多大几百个的情况下。打包的数独会很慢的。