vue的SEO优化方法一：prerender-spa-plugin预渲染

前言

vue项目的SEO很差，传统混编网站，页面是在服务器中生成再发回给客户端的，爬虫爬取页面的时候，从服务器中已经拿到的时完整内容的页面，而vue单页面应用中，页面的内容都是通过javascript动态生成的，传统爬虫爬取页面时，获取到的html文件只有一个div标签，没有任何有价值的东西。

解决SEO的方法有好多，它们各自也有着自己的优缺点，而预渲染就是其中的一种。

预渲染的原理是：在打包的时候，用自己的爬虫先爬取一遍指定的页面（vue渲染完后的页面），生成对应的html文件，把打包后的文件夹部署到服务器上，当浏览器访问这些路径的时候，因为服务器上有对应的html文件，所以访问的是匹配html文件，你可以理解为网页的快照。

第一次访问或者刷新的时候，查看当前页面的源代码，是包含了渲染后的很多内容的。html文件的js中包含new Vue()构建vue单页面应用的代码，通过$router.push等跳转时，走的仍然是vue的逻辑，vue的功能并不会受到影响。

两幅图可以清晰感受到预渲染的效果：

未预渲染前源代码

预渲染后源代码

适用场景：适合内容不经常变化的页面，比如官网的大部分页面、宣传页等；因为生成的html页面已经是渲染过的了，又不会影响vue的能力，所以也可以用作首屏优化，减少单页面白屏时间。

但是预渲染不适合动态网站内容，比如文章详情页，因为预渲染要明确url，并且一个url对应生成一个html文件，文章什么的太多，不可能发布一条新的文章，就重新部署一次代码。

代码实现

这里使用的vue2和vue-cli构建的项目，预渲染插件为:prerender-spa-plugin

安装依赖

npm install prerender-spa-plugin -D

配置vue.config.js

// 导入prerender-spa-plugin插件，并创建一个PuppeteerRenderer
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')

module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return
    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'), // 必备，与渲染生成文件的目录，应该和项目打包的生产路径一致
          routes: [ '/', '/about', '/some/deep/nested/route' ], // 必备 需要预渲染的路径
          // 自定义渲染器，非必须，但是在vue项目中需要用到它
          renderer: new Renderer({
            // 等待页面上调用了指定的事件后再渲染页面，这个和其他爬虫重要的区别
            // 在 main.js 中 document.dispatchEvent(new Event('my-app-element'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'my-app-element'
          })
        })
      ]
    }
  }
}

修改main.js

/...
new Vue({
  router,
  store,
  mounted () { // 等vue执行mounted生命周期后，表示页面已经挂载完成了，这是再触发自定义事件，告诉插件可以渲染了
    document.dispatchEvent(new Event('my-app-element'))
  },
  render: h => h(App)
}).$mount('#app')

检查路由模式预渲染一定需要使用history的路由形式

const router = new VueRouter({
  routes,
  mode: 'history'
})

打包查看效果

npm run build

执行打包指令后，先会执行正常的打包，再执行预渲染。你可以打开dist文件夹查看打包的变化。

填坑

预渲染后vue相关的操作不生效，比如点击事件、路由跳转等。

检查App.vue文件，看看最外层div是否有id="app"，加上即可。

打包过程中，提示 Unable to prerender all routes （无法预渲染所有路由）

我打包的过程中经常遇到，失败了就重新再来一次，多弄几次就可以了，猜测是和渲染性能有关系，电脑太差、路由太多或者页面体积太多等