Vue項目預渲染機制引入實踐

週末想順便把已經作好靜態頁面的webApp項目作一下SEO優化，因爲不想寫蹩腳的SSR代碼，因此準備採用預渲染，原本想着網上有這麼多預渲染的文章，隨便找個來跟着作不就完了嘛，結果年輕的我付出了整個週末..... 這篇文章就記錄一下最後是怎麼配置的 T.T

聲明：

1. 如下配置只保留有必要的
2. 生成目錄這裏使用base代替，請自行修改
3. vue-cli模板使用webpack，其餘模板類推
4. webApp - 在線預覽
5. Github - 配置了預渲染的demo

1. 簡介與使用場景

咱們知道SPA有不少優勢，不過一個缺點就是對(不是Google的)愚蠢的搜索引擎的SEO不友好，爲了照顧這些引擎，目前主要有兩個方案：服務端渲染(Server Side Rendering)、預渲染(Prerending)。

若是你只須要改善少數頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能須要預渲染。無需使用 web 服務器實時動態編譯 HTML (服務端渲染, SSR)，而是使用預渲染方式，在構建時(build time)簡單地生成針對特定路由的靜態 HTML 文件。它主要使用 prerender-spa-plugin 插件，其與SSR同樣均可以加快頁面的加載速度，而且侵入性更小，在已上線的項目稍加改動也能夠輕鬆引入預渲染機制，而SSR方案則須要將整個項目結構推翻；

訪問預渲染出來的頁面在訪問時與SSR同樣快，而且它將服務端編譯HTML的時機提早到了構建時，所以也下降了服務端的壓力，若是你的服務器跟個人同樣買的 1M1G1核 的小水管服務器 ( 窮 )，那麼預渲染可能更適合你。不過SSR和預渲染的使用場景仍是有較明顯的區別的。預渲染的使用場景更可能是簡單的靜態頁面。服務端渲染適用於複雜、較大型、與服務端交互頻繁的功能型網站，好比電商網站。

2. 安裝配置

首先來看看相關技術棧：vue^2.5.二、vue-router^3.0.一、vue-cli^2.9.六、webpack^3.6.0、prerender-spa-plugin^3.3.0

2.1 安裝

安裝跟其餘庫同樣

# Yarn $ yarn add prerender-spa-plugin -D # or NPM $ npm install prerender-spa-plugin --save-dev

2.2 前端配置

首先看看文件結構，用的是vue-cli2的webpack模板生成的文件結構

│  .babelrc
│  index.html
│  package.json
│  README.md
├─build
│      build.js
│      check-versions.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
├─config
│      dev.env.js
│      index.js
│      prod.env.js
├─src
│  │  App.vue
│  │  main.js
│  │ 
│  ├─assets
│  ├─components
│  ├─router
│  │      index.js
│  ├─styles
│  ├─utils
│  └─views
│          BigData.vue
│          CompanyHonor.vue

而後是router/index.js的配置，預渲染要求是histroy模式，有的文章說不須要history模式，這是錯的，不然生成的頁面都是同一個html。另外注意加上base不然若是你但願跳轉到二級頁面的localhost/base/home時候，在頁面中點擊<router-link to="/home">home</router-link>的時候會跳轉localhost/home

// src/router/index.js

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: '/base/', routes: [...] }) 

而後是config，這裏注意assetsPublicPath不是./,

// config/index.js

const path = require("path") module.exports = { build: { index: path.resolve(__dirname, "../base/index.html"), assetsRoot: path.resolve(__dirname, ".."), assetsSubDirectory: "base/static", assetsPublicPath: "/", } }

而後是插件的配置，是放在prod中的，由於只有build的時候會用

// build/webpack.prod.conf.js

const path = require('path') const config = require('../config') const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpackConfig = merge(baseWebpackConfig, { new PrerenderSPAPlugin({ staticDir: config.build.assetsRoot, outputDir: path.join(config.build.assetsRoot, 'base'), indexPath: config.build.index, // 對應路由文件的path routes: [ '/', '/BigData', '/CompanyHonor' ], renderer: new Renderer({ headless: false, // 無桌面系統去掉 renderAfterDocumentEvent: 'render-event' }) }) })

注意了，若是你的項目是部署在linux/centOS之類沒有桌面的系統，須要把headless: false去掉，若是centOS報沒有找到lib的錯，請參考 issue-200 的解決辦法。

另外注意上面一個renderAfterDocumentEvent: 'render-event'了麼，這個意思是在render-event事件觸發以後執行prerender，這個事件咱們在main.js中mounted鉤子觸發

// src/main.js

import Vue from 'vue' import App from './App' new Vue({ el: '#app', render: h => h(App), mounted() { document.dispatchEvent(new Event('render-event')) } })

還有個配置要注意下在 build/utils.js 中的 ExtractTextPlugin.extract 的 publicPath ，不然一些vue中引用的資源會找不到

// build/utils.js

ExtractTextPlugin.extract({
  use: loaders, fallback: 'vue-style-loader', // publicPath: '../../' })

這時候執行npm run build就能夠生成剛剛配置在PrerenderSPAPlugin插件中routes中的頁面html了，這過程當中會一閃而過的短暫打開chromium瀏覽器，不用管。

最後生成的目錄樹：

│  index.html
├─BigData
│      index.html
├─CompanyHonor
│      index.html
└─static
    ├─css
    ├─fonts
    ├─img
    └─js

最後若是但願進一步優化生成出來頁面的SEO，能夠配合 vue-meta-info 這個網上有不少文章，就不贅述了

2.3 nginx配置

順便貼一下nginx配置

server { listen 80; server_name localhost; root /nginx-1.14.0/html; error_page 500 502 503 504 /50x.html; location ~ ^/base/ { try_files $uri $uri/ /base/index.html; } location = /50x.html { root html; } }

 轉載：SHERlocked93