Vue2.x项目SPA的SEO解决方案(预渲染-Prerendering)

Copyright 2019-06-03, Jachin
QQ: 381558301 
Email: 381558301@qq.com 

前端最主要的任务除了是界面展示和业务逻辑处理，当然还有对Crawler/Spider/Robot的识别机制要有所了解；搜索引擎的准确适配，才能使自己的项目/产品展现在目标用户里。但是现在普遍的网络爬虫算法只抓取静态资源，对于javascript脚本基本一概略过。（但是Googlebot的算法或许已更新），测试报告。前言完毕，进入主题。

Vue2.x 渲染模式分类

1. SSR（服务器端渲染）
2. Prerendering （前端预渲染）

两者具体差异自行去官网看看吧 ヽ(￣▽￣)ﾉ

Prerendering 的部署

预渲染模式下最好配合 vue-meta-info 一起使用，并且项目中需要把router的mode设置为history

// 安装
npm install prerender-spa-plugin --save

build文件夹webpack.prod.conf.js 头部声明行添加下面两行

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

//找到plugins位置加入该插件
const webpackConfig = merge(baseWebpackConfig, {
	···
	plugins: [
		···
	    new PrerenderSPAPlugin({
	      // 生成文件的路径，也可以与webpakc打包的一致。
	      // 非常重要: 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
	      staticDir: path.join(__dirname, '../dist'),
	      
	      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
	      routes: ['/', ‘page1’, 'page2', 'page3', 'page4'],
	      
	      // 这个很重要，如果没有配置这段，也不会进行预编译
	      renderer: new Renderer({
	        inject: {
	          foo: 'bar'
	        },
	        headless: false,
	        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
	        renderAfterDocumentEvent: 'render-event'
	      }),
	    })
	]
	···
}

找到main.js文件加入以下代码

new Vue({
	el: '#app',
	 router,
	 components: { App },
	 template: '<App/>',
	 /* 这句非常重要，否则预渲染将不会启动 */
	 mounted () {
	     document.dispatchEvent(new Event('render-event'))
	 }
})

接下来安装vue-meta-info

npm install vue-meta-info --save

找到main.js文件加入以下代码

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

在各个vue页面里面配置属于自己的meta标签

<script>
export default {
  // 配置title和meta数据
  metaInfo: {
    title: 'title',
    meta: [
      {
        name: 'keywords',
        content: '关键字'
      },
      {
        name: 'description',
        content: '描述'
      }
    ]
  },
  data () {
    return {}
  }
}
</script>

OK，完事了
**运行一下 npm run build，运行完毕可以看到dist目录下有多个文件夹和一个index.html，各个文件夹命名为
**

routes: ['/', ‘page1’, 'page2', 'page3', 'page4'],

此处数组即文件夹的名字，文件夹下对应生成该page1.vue的html内容（index.html）

本人运行中的报错，以及解决如下

安装prerender-spa-plugin可能会因为网络问题卡在chrome下载这一步，解决办法是：退出当前下载任务 ctrl+c，输入配置
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer
即可

参考文档：
vuejs 预渲染插件 prerender-spa-plugin 生成多页面 – SEO