HTML5 VUE單頁應用 SEO 優化之 預渲染（prerender-spa-plugin）

前言：當前 SPA 架構流行的趨勢如日中天，先後端分離的業務模式已經成爲互聯網開發的主流方式，可是 單頁面 應用始終存在一個痛點，那就是 SEO，

對於那些須要推廣，但願能在百度搜索時排名靠前的網站而言，使用單頁面應用的是沒法被 百度的 蜘蛛 爬到的，爲此，衆多流行的 MVVM 框架都推出了

不少解決方案，有官方的也有三方的，VUE也不例外，本文章就來分享一下 vue-cli 結合 prerender-spa-plugin 插件這種預渲染的 SEO 優化解決方案

1，使用 vue-cli 建立一個項目，安裝依賴 並啓動 （若是不會使用腳手架建立項目或 對 VUE 框架不太熟的，建議先系統學習 VUE 基礎部分在看該文章）

vue init webpack vue-prerender
cd vue-prerender
npm install
npm run dev

2，腳手架建立的項目默認會給咱們 一個 名稱爲 HelloWorld.vue 的主鍵，咱們將其內容修改成

<style scoped="scoped">

</style>
<template>
    <div class="hello">
        <router-link to="/test">/test</router-link>
    </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {}
        }
    }
</script>

3，咱們在建立一個名爲 Test.vue 的組建，內容以下

<style scoped="scoped">

</style>
<template>
    <div class="test">
        <router-link to="/">回到首頁</router-link>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: "Test",
        data() {
            return {}
        }
    }
</script>

4，修改 src/router/index.js 路由文件以下，特別注意這裏要將 mode 設置爲 history 模式，目前預渲染只支持該種模式

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import Test from '../components/Test'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/test',
            name: 'Test',
            component: Test
        }
    ]
})

5，這樣咱們就實現了兩個互相跳轉的路由，咱們能夠 使用 npm run dev 命令啓動項目測試一下 （src 目錄結構以下）

6，測試無誤後，咱們下載預加載插件 prerender-spa-plugin

npm install prerender-spa-plugin -D

7，咱們修改 build/webpack.prod.conf.js 配置文件，將預渲染插件加入進去 （咱們通常會將網站的首頁 和 一些變更不大的頁面作預渲染，變更頻繁的頁面不適合改插件）

const PrerenderSpaPlugin = require('prerender-spa-plugin')

plugins: [
        // 配置 prerender-spa-plugin 預渲染插件
        // 生成文件的路徑，此處須要與 webpack 打包地址一致，因此直接使用 config.build.assetsRoot
        // 數組爲 須要預渲染的 路由，基本上是首頁或者 變更不大的列表頁等等，目前只支持 h5 history 方式
        new PrerenderSpaPlugin(
            path.join(config.build.assetsRoot),
            ['/', '/test']
        ),
       ......

8，完成上面的步驟咱們就能夠開始編譯項目了

npm run build

9，編譯後的 dist 目錄結構以下，其中 index.html 對應路由 '/', test/index.html 對應路由 '/test'，咱們能夠打開看看，裏面的內容不少 

10，注意，不要直接把 index.html 拖動到瀏覽器訪問，那樣會有路徑的問題，咱們能夠搭建一個靜態服務器來測試打包後的項目是否有效

11，咱們本着一事不煩二主的原則，就直接使用 node 的 express 框架 搭建一個靜態服務器作測試使用

npm i express -D

12，咱們在項目根目錄下建立一個腳本 server.js，內容以下

const path = require('path')
const express = require('express')

const app = express();
app.use(express.static(path.join(__dirname, 'dist')))
app.listen(8080)

 

13，咱們在 package.json 文件中添加啓動腳本，下面代碼標紅的部分爲 添加的內容

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "server": "node server.js"
  },

14，啓動靜態服務器

npm run server

15，在瀏覽器中輸入 localhost:8080 訪問打包生成後的頁面，一切 OK

  

16，優缺點分析

優勢：簡單易上手，相對於一些須要服務器渲染的方式如 vue 官方的 vue-ssr，該方法最終將代碼打包成靜態資源，能夠部署到任何服務器上，不依賴於服務器就能知足 SEO 的要求

缺點：只支持 h5 history，而且不太適合變更較頻繁的頁面