vue项目做seo（prerender-spa-plugin预渲染）

一.为什么seo是spa项目的痛点

网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：

1. 从 meta 标签中读取 keywords 、 description 的内容。
2. 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。
3. 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）
4. 像 h1 - h6 标签是具有不同程度的强调意义的。 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。
5. 爬虫在爬取的过程中，不会去执行js，所以隐藏在js中的跳转也不会获取到。
6. spa正好就踩到了痛点，只有一个主要的页面（index.html），而且页面里的内容还很少，通常只有 router-view 或者带有 id 的 div 标签。其跳转和业务逻辑的行为都是靠执行js才行的。

二.具体步骤

使用 npm 或 yarn 安装 prerender-spa-plugin 和 vue-meta-info 的过程就不描述了。

在webpack中配置 prerender-spa-plugin

配置先弄懂要配置在哪个文件里，配置是否生效。 vue-cli2 的配置文件很多，对这些文件不了解的话，很容易配置错地方。

这个配置只需要在 build 的时候可以生成预渲染好的html，所以应该配置在 build/webpack.prod.conf.js 这个文件里。　　　　

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

const webpackConfig = merge(baseWebpackConfig, {
plugins: [
// vue-cli生成的配置中就已有这个了，不要动
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),

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

// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
routes: ['/', '/index', '/skin', '/slimming', '/exercise', '/alPay', '/wxPay'],

// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})

})

]
})

在 webpack.prod.conf.js 配置完成之后，然后再 main.js 里改成如下所示：

new Vue({
el: '#app',
router,
store,
render: h => h(App),

/* 这句非常重要，否则预渲染将不会启动 */
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})

如果将上面两个地方配置好了，离成功也就近了。然后运行一下 npm run build 。看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 用IDE打开，看文件内容里是否有该文件应该有的内容。有的话，这步就成功了。