单页面的SEO优化：在vue中使用prerender-spa-plugin

之前上线了一个使用vue做的单页面应用。google倒是可以爬取js运行的数据了，很快就收录了我的站点，但是百度还不行，很多天了百度依旧没有收录我的网站，只好针对该网站做做SEO处理。顺便给我的这个小站打个广告：https://www.pkgif.net （给GIF自由添加字幕生成表情包的小工具）

单页面应用主要有两种SEO的方式

1. 服务端渲染

这是比较常见的模式，比如vue和react等都提供了服务端渲染的方式，还能使用nuxt和next这样将服务端渲染集成得更简单的框架。或者将vue集成于express、koa、egg等nodejs的web框架进行服务端渲染也是可行的，也有现成的方案。

2. 预渲染

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

这是vue官方文档中的一段话。如果只是少量页面需要进行SEO优化且这些页面的数据不复杂不需要很高的实时性，是不大必要使用服务端渲染的。可以将这些页面在webpack打包的时候利用浏览器环境来执行js生成一个静态的html。
由于我的小站只有一个页面，且这个页面的内容都是死的，预渲染是我当下较好的解决方案。这里我选用了vue官方推荐的webpack插件——prerender-spa-plugin，该插件也可以进行react等其他应用的预渲染

安装

$ npm i prerender-spa-plugin

该插件依赖puppeteer，这是一个调用chrome API的库。在安装的过程中，puppeteer会下载chromium（提供浏览器环境），这时候国内的网络会报错，因为你懂的。

提示告诉我们设置这个环境变量“PUPPETEER_SKIP_CHROMIUM_DOWNLOAD”以跳过下载，进行手动下载。另外一种解决办法是将chromium下载源设置为淘宝，具体做法是

npm config set PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org

这样我们就可以成功安装prerender-spa-plugin

在linux上，npm安装的时候可能会出现没有权限mkdir，使用sudo安装即可

使用

注意：首先需要将vue-router设置为history模式，否则预渲染无效。

我们在生产构建的时候才需要该插件进行预渲染，所以需要在prod相关的配置里添加该插件

// webpack.prod.js
'use strict';
const webpack = require('webpack');
const helpers = require('./helpers');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');

module.exports =  {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      staticDir: helpers.root('webapp'),
      outputDir: helpers.root('webapp-prerender'),
      routes: [ '/' ],
      minify: {
        collapseBooleanAttributes: true,
        collapseWhitespace: true,
        decodeEntities: true,
        keepClosingSlash: true,
        sortAttributes: true,
      },
    }),
  ],
});

这是我的代码片段，helpers.root是工程根目录的路径，

• staticDir：原本build的静态资源目录。入口html一定要为index.html，如果不是还需要另外配置一个参数indexPath指明入口html
• outputDir：预渲染生成的html的目录，如果不设置的话和staticDir一致
• routes：需要预渲染的路由
• minify：一些html压缩的配置

构建之后，就会产生两个新的文件夹，一个是webapp，一个是webapp-prerender。

注意：在centos 7.x上，即使prerender-spa-plugin安装成功，在构建的时候也会报错，缺少一些文件，这时候需要手动安装一些依赖的文件

#依赖库
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y
#字体
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

nginx配置

location / {
	index index.html;
	expires max;
	root ${staticDir};
	try_files $uri $uri/ /index.html;
	if ( $http_user_agent ~* (baidu|360|google|bing|sogou|soso|youdao|jike|yahoo|msn)){
		root ${outputDir};
	}
}

静态资源是托管在nginx上的，这里通过userAgent将搜索引擎判断，读取webapp-prerender文件夹下的，而普通用户使用还是在webapp下的SPA静态资源

采用postman进行简单的测试

1. 普通用户的访问
   
   2.百度搜索引擎的访问