vue项目实现seo优化之使用预渲染(prerender-spa-plugin搭配vue-meta-info)

为什么要做seo优化

相比于传统多页面项目,vue,react等之类的单页面应用(spa)对网络爬虫不友好
因为网络爬虫只能识别网页内容(html),并不能抓取js,而spa应用主要是靠js的跳转来实现的

vue项目的seo优化方式

1.SSR(服务端渲染),使用Nuxt.js,适用于从零开始搭建项目时使用
2.预渲染,使用prerender-spa-plugin,在已完成的项目的基础上,适用于某几个页面需要进行seo优化
3.prerender-node（需要后端去做ngnix处理）

本文主要使用预渲染实现seo优化

1.安装prerender-spa-plugin+vue-meta-info

 npm i prerender-spa-plugin --save -D
 npm i vue-meta-info --save

页面中metaInfo配置内容

metaInfo: {
    title: 'contact', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是contact关键字contactcontactcontactcontactcontactcontactcontactcontact'
    },
    {
      name: 'description',
      content: 'contactcontactcontactcontactcontactcontactcontact描述'
    }],
    link: [{ // set link
      rel: 'asstes',
      href: 'https://www.baidu.com/'
    }]
  }

vue.config,js配置内容

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
// eslint-disable-next-line no-unused-vars
const webpack = require('webpack')
const path = require('path')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
          // outputDir: path.join(__dirname, './'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/',  '/about','/contact'],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
              inject: { //默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
          })
        })
      ]
    }
  },
}

在 vue.config.js 配置完成之后，然后再 main.js 里改成如下所示

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({
  router,
  render: h => h(App),
  //添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
   /* 这句非常重要，否则预渲染将不会启动 */ 
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')