最近用Vue写的个人网站butterPig上线有一段时间了。但是一直没有被收录，经过苦思冥想，发现会不会是seo没有优化的原因。果然百度之后，发现这种单页面应用的对seo极其的不友好，百度的爬虫并不会等到js文件加载渲染完成页面后再爬内容。因此单页面网站的内容对于百度爬虫来说，就是空的，基本上啥也没有。相当蛋疼的事情。
vue react angular等框架的单页面应用，想彻底解决seo问题，还是要实现SSR服务端渲染。但是对于一个已经做好的网站，再去改成服务端渲染，实在是劳民伤财。所以只有使用一个折中的方案，就是prerender预渲染。将部分或者全部页面预先渲染成html静态文件保存着。然后有用户请求的时候就传输过去。
因此只要是webpack的项目，就可以使用prerender-spa-plugin插件来实现预渲染，非常方便。

基本用法 (webpack.config.js)

可以将下面的代码放到webpack.config.js文件中，再routes里面填写需要预加载页面的路由即可实现预渲染。还有更多的配置参数可以参考该插件的github页。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const path = require('path')

const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}

如果是新版的vue cli脚手架项目，一般没有webpack文件，因为脚手架已经自动配置好了，想要把插件代码加入到webpack中，则要在vue.config.js文件中，通过configureWebpack属性来实现，则可以将配置插入到webpack配置文件中。例如： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// vue.config.js
// In my case i was doing below and was facing the same error
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
               new PrerenderSPAPlugin({
                // Required - The path to the webpack-outputted app to prerender.
                staticDir: path.join(__dirname, 'dist'),
                // Required - Routes to render.
                routes: ['/', '/page-path', '/another-page'],
            })
        ]
    },
    lintOnSave: false
}

现在就可以直接使用预渲染功能了，通过在线的模拟蜘蛛查询，发现网页被爬到的html内容确实多了很多。