介紹

什么是 SEO

SEO（Search Engine Optimization）搜索引擎優化，是指通過對網站進行站內優化和修復（網站Web結構調整、網站內容建設、網站代碼優化和編碼等）和站外優化，從而提高網站的關鍵詞排名以及公司產品的曝光度，

搜索引擎的原理

搜索引擎，又稱爬蟲或者蜘蛛，它在爬取和分析頁面內容時，主要進行如下操作：

1. 從 meta 標簽中讀取 keywords、description 的內容
2. 根據語意化的html標簽爬取和分析內容（h1-h6、strong、em等標簽具有不同程度的強調意義；與整篇都是div構成的網頁，SEO結果就相差甚遠了）
3. 讀取a標簽里的鏈接，通過a標簽的鏈接再跳轉到別的網站（深度優先：先跳轉回頭再爬取；廣度優先：先爬取然后再依次跳轉）

SEO 為啥對單頁面應用不友好

1. 爬蟲在爬取程序中，不會去執行js，因此所有隱藏在js中的跳轉或者資料都獲取不到（vue通過js控制路由，然后渲染出對應頁面，而搜索引擎是不會去執行頁面的js的，導致搜索引擎只能收錄index.html，而無法搜到其相關的子頁面的內容）
2. 瀏覽器加載頁面時，首先會對頁面進行渲染（包括 html的決議、dom樹的構建、css的構建、javascript決議、布局、繪制），當決議到javascript的時候，才會去觸發vue的渲染，將元素掛載到id為app的div上，這時候我們才能看到頁面的內容，因此被搜索引擎收錄的index頁面，可能也毫無價值（因為沒有任何資料）

導致的問題

1. 單頁面應用無法被SEO，會導致被搜索引擎收錄的頁面減少，從而導致點擊量減少，影響產品曝光度
2. 不能對不同頁面設定不同的TDK（title, keywords, description），每個頁面的title和meta標簽都是一樣的，不利于網路爬蟲的爬取

解決方案

由于爬蟲不會去執行js，因此如果需要對單頁面應用做SEO，就需要預渲染，vue提供了兩種方案解決該問題

1. 使用 Nuxt.js 實作服務端預渲染（SSR） https://cn.vuejs.org/v2/guide/ssr.html
2. 使用 prerender-spa-plugin插件實作 https://www.npmjs.com/package/prerender-spa-plugin

prerender-spa-plugin 較簡單，但打包需要的時間長，適用于少量頁面；而SSR雖然復雜，但更適用于大型應用的SEO

方案一：prerender-spa-plugin

這里用的是 vue-cli 4.5 + Vue2

使用 vue ui 進入圖形界面，搜索并安裝插件 vue-cli-plugin-prerender-spa

插件的作用

1. 安裝 prerender-spa-plugin，并記錄到 package.json 的 devDependencies
2. 修改 src/main.js 添加 mounted: () => document.dispatchEvent(new Event("x-app-rendered"))
3. 自動配置 vue.config.js

package.json

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
  mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
}).$mount('#app')

vue.config.js

module.exports = {
  lintOnSave: false,

  pluginOptions: {
    prerenderSpa: {
      registry: undefined,
      renderRoutes: [ // 需要預渲染的路由地址
        '/','/about'
      ],
      useRenderEvent: true, // 在 mounted 時，傳遞渲染事件通知 prerender
      headless: true, // 無界面瀏覽器
      onlyProduction: true // 僅在生產模式才進行spa處理
    }
  }
}

至于 src/router/index.js 不用做任何改動，也不用把 mode 設定為 history

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

編譯報錯 Chromium revision is not downloaded

僅僅做了上述配置后，執行 npm run build 還是會報錯 Chromium revision is not downloaded，這是因為 prerender-spa-plugin 這個插件依賴于爬蟲來抽取頁面，而 puppeteer 正是這個用來實作爬蟲的無界瀏覽器
Puppeteer 是一個控制 headless Chrome 的 Node.js API ，它是一個 Node.js 庫，通過 DevTools 協議提供了一個高級的 API 來控制 headless Chrome，它還可以配置為使用完整的（非 headless）Chrome，

在瀏覽器中手動完成的大多數事情都可以通過使用 Puppeteer 完成，下面是一些入門的例子：

• 生成螢屏截圖和 PDF 頁面
• 檢索 SPA 并生成預渲染內容（即“SSR”）
• 從網站上爬取內容
• 自動提交表單，UI測驗，鍵盤輸入等
• 創建一個最新的自動測驗環境，使用最新的 JavaScript 和瀏覽器功能，在最新版本的 Chrome 中直接運行測驗
• 捕獲網站的時間線跟蹤，以幫助診斷性能問題

要安裝該插件，一定要使用 cnpm 命令，從國內鏡像地址下載 chrome 內核（npm從外國的地址是無法正常下載的，這會導致后面也無法正常 build ）

解決辦法有三種：
1.使用Chromium 國內源

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i -g puppeteer

2.使用淘寶的cnpm 安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i -g puppeteer

3. 手動下載Chromium檔案，解壓后放在本地
   https://npm.taobao.org/mirrors/chromium-browser-snapshots/
   放在模塊的默認讀取目錄下

• node_modules\puppeteer\.local-chromium\win64-848005(系統型別-版本號)\chrome-win32(下載的檔案名)\
• node_modules\puppeteer\.local-chromium\linux-848005(系統型別-版本號)\chrome-linux(下載的檔案名)\
  

如果安裝后依舊報上述錯誤，試試 cnpm uninstall puppeteer 命令，雖然字面意思上是卸載，但實際測驗發現還是重裝

最后執行 npm run build，就會發現每個路由都在 dist 檔案夾被編譯成一個單獨的 html 檔案，這樣就可以正常SEO了

vue-meta-info

使用該組件可以解決之前說的 —— SEO 的 TDK問題（不同頁面設定不同的 title, keywords, description）或為某些頁面設定允許縮放，而其他頁面不允許等操作，

首先引入 vue-meta-info 依賴，npm install -D vue-meta-info，該插件的官方地址為 https://www.npmjs.com/package/vue-meta-info

之后在 src/main.js 中全域系結

import MetaInfo from 'vue-meta-info'
 
Vue.use(MetaInfo)

最后在組件內使用即可

<template>
  ...
</template>
 
<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script> 

npm run build 打包結果可看出

1. 不同路由有不同的 title
2. 不同路由也有自己的 meta-name 和 meta-content
   

方案二：Nuxt.js

優點

1. 純靜態檔案，訪問速度更快
2. 對比SSR，不涉及到服務器負載方面的問題
3. 靜態網頁不易遭受黑客攻擊，安全性更高

不足：

1. 如果動態路由引數多的話不適用
2. Nuxt.js 執行generate靜態化打包時，動態路由會被忽略