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這種