前言：眾所周知，Vue SPA單頁(yè)面應(yīng)用對(duì)SEO不友好，當(dāng)然也有相應(yīng)的解決方案，下面列出幾種最近研究和使用過(guò)的SEO方案，SRR和靜態(tài)化基于Nuxt來(lái)說(shuō)。

1.SSR服務(wù)器渲染；
2.靜態(tài)化；
3.預(yù)渲染prerender-spa-plugin；
4.使用Phantomjs針對(duì)爬蟲(chóng)做處理。

1.SSR服務(wù)器渲染

關(guān)于服務(wù)器渲染：Vue官網(wǎng)介紹 ，對(duì)Vue版本有要求，對(duì)服務(wù)器也有一定要求，需要支持nodejs環(huán)境。

使用SSR權(quán)衡之處：

開(kāi)發(fā)條件所限，瀏覽器特定的代碼，只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用；一些外部擴(kuò)展庫(kù) (external library) 可能需要特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行； 環(huán)境和部署要求更高，需要Node.js server 運(yùn)行環(huán)境； 高流量的情況下，請(qǐng)準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。

優(yōu)勢(shì)：

更好的 SEO，由于搜索引擎爬蟲(chóng)抓取工具可以直接查看完全渲染的頁(yè)面； 更快的內(nèi)容到達(dá)時(shí)間 (time-to-content)，特別是對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。

不足：（開(kāi)發(fā)中遇到的坑）

1.一套代碼兩套執(zhí)行環(huán)境，會(huì)引起各種問(wèn)題，比如服務(wù)端沒(méi)有window、document對(duì)象，處理方式是增加判斷，如果是客戶端才執(zhí)行：

if(process.browser){ console.log(window);}

引用npm包，帶有dom操作的，例如： wowjs ，不能用 import 的方式，改用：

if (process.browser) {  var { WOW } = require('wowjs');  require('wowjs/css/libs/animate.css'); }

2.Nuxt asyncData方法，初始化頁(yè)面前先得到數(shù)據(jù)，但僅限于 頁(yè)面組件 調(diào)用：

// 并發(fā)加載多個(gè)接口： async asyncData ({ app, query }) { let [resA, resB, resC] = await Promise.all([  app.$axios.get('/api/a'),  app.$axios.get('/api/b'),  app.$axios.get('/api/c'),  ])    return {  dataA: resA.data,  dataB: resB.data,  dataC: resC.data,  } }

在asyncData中獲取參數(shù)：

1.獲取動(dòng)態(tài)路由參數(shù)，如：

/list/:id' ==>  '/list/123

接收：

async asyncData ({ app, query }) { console.log(app.context.params.id) //123}

2.獲取url?獲取參數(shù)，如：

/list?id=123

接收：

async asyncData ({ app, query }) { console.log(query.id) //123}

3.如果你使用 v-if 語(yǔ)法，部署到線上大概也會(huì)遇到這個(gè)錯(cuò)誤：

Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.We [as appendChild]

根據(jù)github nuxt上的 issue第1552條 提示，要將 v-if 改為 v-show 語(yǔ)法。

4.坑太多，留坑，晚點(diǎn)更。

2.靜態(tài)化