最近用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内容确实多了很多。