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

遇到的几个问题：

• 项目中使用的版本为2.1.0版本，@3.0.0版本的没有安装成功，在安装过程中会卡住，导致一直下载不下来，如果直接终止的话，会导致后续在build的过程中会报错
• 如果没有对应路由或者拼写错误的话，build也会报错
• webpack中配置的route需要与router一直，注意/符号
• 需要注意Apache等配置，如果访问static的静态文件，都是统一访问到dist/static/目录下的，而不是dist/about/static这种