Vue SPA项目SEO优化之预渲染Prerender-spa-plugin

目的

由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容，通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题。

可以看到项目编译后的index.html中只有一些HTML和js，css文件的引用，而无关于内容的静态文本。当然你也可以添加meta的keyword和descrption,去简答的描述一些关于网站的内容。

curl xxxx.com 
// 返回的结果发现只有简单的HTML和js引用，无相关的静态文本

使用过程

Vue预渲染插件Prerender-spa-plugin GitHub地址

能够解决的问题

• SEO
• Slow Client
• OpenGraph/Social Metadata

不能解决

• User-specific content、
  • 不同的用户看都会不同的页面，这种类型的页面不适用预渲染
• Frequently changing Content
  • 对于一些经常发生变化的页面，如体育比赛等，会导致编译后的数据不是实时更新的
• Thousands of routers
  • 不适用与路由太多的页面，会导致构建build的过程，等待的时间是超长

实现

主要通过Webpack插件的方式，控制编译出来的静态文件的方式。

npm install prerender-spa-plugin@2.1.0 --save

Webpack简单配置

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
 
module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // Absolute path to compiled SPA
      path.join(__dirname, '../dist'),
      // List of routes to prerender
      [ '/', '/about', '/contact' ]
    )
  ]
}

• 打包完成后，你会发现原来的dist目录下，多出来about,contact这样的目录，这个目录下会有对应的index.html文件；这份文件是对应路由生产后的静态页面，便于SEO

curl xxxx.com
// 会发现会讲渲染后的页面返回，而不是刚开始的之后简单的js引用的初始页面

• 如果需要配置路由的访问， 还需要配置Apache或Nginx等访问，匹配相应的路由访问导指定目录下index.html文件，即可。

// 配置完成后，可以查看效果,每个页面返回的都是编译后的静态文件
curl xxxx.com/about
curl xxx.com/contact

图片来源：http://www.coubai.com/ 网络游戏