Vue SPA專案SEO優化之預渲染Prerender-spa-plugin

_zysndy發表於2018-03-26
Vue優化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這種

相關文章