vue使用prerender-spa-plugin预渲染进行seo优化

前言

单页应用（SPA）是最近流行的一种应用模式，它支持在同一页面下通过哈希（hash）或html5的history api实现不刷新式切换视图，既实现了动态路由的变化，也实现了历史记录的保持，然而，相比于静态页面和动态页面（ASP/PHP/JSP）而言，缺点也是显而易见的，那就是对SEO不友好。

不管是Vue、React还是angular等实现路由的框架，无一不是加载原始html代码，再通过JavaScript动态渲染页面，但对于爬虫而已，JavaScript代码是不会执行的，从而导致爬取不到合适的内容。

解决方案

爬虫

搜索爬虫不会去执行js代码，只会从原有的html中读取相关信息，所以总的解决方案是尽可能保证原始html代码包含希望被收录的信息，有下面几种方案：

1、页面中使用隐藏式元素
在html源码上写入希望被收录的静态信息，但不显示出来，仅为爬虫服务。

2、专门为爬虫开一个服务
在后端做http拦截，检查请求代理User-Agent是不是爬虫，如果检测到是爬虫类型，动态生产html片段，仅为爬虫服务。

3、使用预渲染（preredner）
在构建项目的同时，自动在浏览器中渲染一遍页面，然后生成相应路由下的静态html，这些路由只有在不执行javascript时才会显示（正是爬虫的情况），如果执行了js，将触发常规逻辑。

4、使用服务端渲染（SSR）
并非动态页面，而是在node端执行vue代码，翻译转换得出相应的html片段/全文，最后在响应体中返回信息（后续文章介绍）。

综合考虑后，方式一适合简单修改，方式二修改难度高，方式三和方式四最为合适。从简易难度而已，预渲染是最简单最快捷的，所以这里先介绍预渲染的seo优化方式。

使用

先安装prerender-spa-plugin模块，然后修改路由为 history 模式，紧接着在打包配置中（webpack.prod.config.js或vue.config.js)添加PrerenderSPAPlugin插件,最后在入口文件中触发相关事件即可。

$ npm install prerender-spa-plugin -S

// build/webpack.prod.conf.js 或 vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin'); // 预渲染
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

// plugins中配置PrerenderSPAPlugin
new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../dist'),
  // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
  routes: ['/'], // 因为该系统操作都是基于登录后的，所以只做登录页面的预渲染就行了
  renderer: new Renderer({
    inject: {
      foo: 'bar',
    },
    headless: false,
    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
    renderAfterDocumentEvent: 'render-event',
  }),
})

由于该插件需要电脑上已安装浏览器软件才可以运行，如果需要在没有浏览器的linux上运行打包，需要先检查电脑版本再添加插件，判断方式如下：

// build/webpack.prod.conf.js 或 vue.config.js
const os = require('os');
// 预渲染操作判断，仅当当前运行系统为window或mac才执行预渲染打包
if (['Windows_NT', 'Darwin'].includes(os.type())) {
  console.log( '将自动打开浏览器进行预渲染操作');
  // 插入前面的插件配置
}else{
   console.log( '非window或mac系统，不存在浏览器，取消预渲染操作');
}

main.js入口文件在 vue 实例完成后执行

// main.js
document.dispatchEvent(new Event('render-event')); // 预渲染

最后因为我们修改了路由模式为history，普通情况下对于浏览器而言‘/list/detail’实际上是要去请求‘/list/detail/index.html’页面，这显然不存在，会报404异常。所以我们需要对nginx服务器进行代理转发，设置如下：

# ect/nginx/nginx.conf
# vue最小管理系统配置（后台服务3000端口）
server {
        listen       8080; # 监听8080端口
        root         /www/vue-base-demo/dist/; // 静态资源目录
        index        index.html; // 首页
        location / {
                try_files $uri $uri/ /index.html; # 当找不到文件404的时候，转发的index.html上
        }
}

当然其他服务器也可以实现，只要思路一样就行。

---

打包

npm run build

打包后将在dist文件夹下生成相应的html文件。

预渲染注意事项
· vue-cli 2.x 和 vue-cli 3.x 配置差不多
· 路由需要使用 history 模式
· 预渲染配置 routes 属性可以填写路由对应的 url，如果需要参数需要配置合适的参数
· renderAfterDocumentEvent 需要对应
· 预渲染打包前会自动打开浏览器从而获取到相关 dom，如果没有浏览器软件将打包失败（建议· 把 dist 包括在 git 项目内）
· nginx 需要相应的修改，避免 404