prerender-spa-plugin插件预渲染使用记录

vue项目一般为SPA应用，而单页面是不利于SEO的，网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：

• 从 meta 标签中读取 keywords 、 description 的内容；
• 根据语义化的 html 的标签爬取和分析内容（一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的）；
• 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）；
• 像 h1 - h6 标签是具有不同程度的强调意义的。 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签；
• 爬虫在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到。

spa正好就踩到了痛点，只有一个主要的页面（index.html），而且页面里的内容还很少，通常只有 router-view 或者带有 id 的 div 标签。其跳转和业务逻辑的行为都是靠执行js才行的。

vue目前有两种解决方案 (据说google已经支持爬取spa。)：

1. SSR服务器渲染：用户访问 url，服务端根据访问路径请求所需数据，拼接成 html 字符串，返回给前端。前端接收到 html 时已有当前url下的完整页面；

   “服务端渲染对于刚接触 vue 的新手来说，并不是那么友好，虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说，都是一种挑战。”--不是我说的。

   大概意思就是：开发成本太大，不适合已完成/已上线的项目。

2. 预渲染模式：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已经有静态数据，需要ajax数据的部分未构建。

      “访问预渲染出来的页面，在访问时与SSR一样快，并且它将服务端编译HTML的时机提前到了构建时，因此也降低了服务端的压力，如果你的服务器跟我的一样买的 1M1G1核 的小水管服务器 ( 穷 )，那么预渲染可能更适合你。不过SSR和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是简单的静态页面。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站，比如电商网站。”--这也不是我说的。

这时大家都会推荐使用一个插件：“prerender-spa-plugin ”，而且可以配合 vue-meta-info 来生成title和meta标签，基本可以满足SEO的需求 。
　  注意了:这时候有人会说“使用预渲染vue-router必须使用history模式”,因为hash模式渲染出来的页面都是一个，一般为首页。但是一般的网站主要内容都会展现在首页里，这时候hash路由完全可以满足需求。

而且，用了history路由线上环境不能刷新页面，因为会报404。结合项目的需求，这里我用的是hash路由。

如何使用prerender-spa-plugin？

1.

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

2.找到他：

在webpack.prod.conf.js里面添加：

// 头部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

在plugins里面添加：

new PrerenderSPAPlugin({
  // 生成文件的路径，也可以与webpakc打包的一致。
  // 下面这句话非常重要！！！
  // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
  staticDir: path.join(__dirname, '../dist'),

  // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。这里直接对照自己的router修改！！！
  routes: ['/', '/a', '/b', '/c', '/d'],

  // 预渲染代理接口
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:9018',
        secure: false
      }
    }
  },

  // 这个很重要，如果没有配置这段，也不会进行预编译
  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: '',
  // 添加mounted，不然不会执行预编译
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

 

到这里预编译的配置修改就完成了，执行 npm run build 查看打包后的dist文件，打开index.html看看本地能否打开。 

 

安装 vue-meta-info 配置title和meta：

npm install vue-meta-info --save

在main.js引入：

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

在vue页面中配置：

此时 prerender-spa-plugin 与 vue-meta-info 就全部完成了 。

本文是本人根据网上的案列，自己亲测成功之后整理出来的。由于被history路由误导折磨了很久故此记录下来为了提醒自己，也为了让看到本文的人少爬点坑。。。

其他优化：

1. 所有图片要加alt;

待更新...