基于VueSEO的四種方案(小結)

前言：眾所周知，VueSPA單頁面應用對SEO不友好，當然也有相應的解決方案，下面列出幾種很近研究和使用過的SEO方案，SRR和靜態化基于Nuxt來說。

1.SSR服務器渲染；

2.靜態化；

3.預渲染prerender-spa-plugin；

4.使用Phantomjs針對爬蟲做處理。

1.SSR服務器渲染

關于服務器渲染：，對Vue版本有要求，對服務器也有一定要求，需要支持nodejs環境。

使用SSR權衡之處：

開發條件所限優化seo方案，瀏覽器特定的代碼，只能在某些生命周期鉤子函數(lifecyclehook)中使用；一些外部擴展庫(externallibrary)可能需要尤其處理，才能在服務器渲染應用程序中運行；環境和部署要求更高，需要Node.jsserver運行環境；高流量的情況下，請預備相應的服務器負載，并明智地采用緩存策略。

優勢：

更好的SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面；更快的內容到達時間(time-to-content)，尤其是對于緩慢的網絡情況或運行緩慢的設備。

不足：（開發中碰到的坑）

1.一套代碼兩套執行環境，會引起各種問題，比如服務端沒有window、document對象，處理方式是增加判定，假如是客戶端才執行：

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

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

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

2.NuxtasyncData方法，初始化頁面前先得到數據，但僅限于頁面組件調用：

//并發加載多個接口：asyncasyncData({app,query}){let[resA,resB,resC]=awaitPromise.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中獲取參數：

1.獲取動態路由參數，如：

/list/:id’==>‘/list/123

接收：

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

2.獲取url?獲取參數，如：

/list?id=123

接收：

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

3.假如你使用v-if語法，部署到線上大概也會碰到這個錯誤：

ErrorwhileinitializingappDOMException:Failedtoexecute‘appendChild’on‘Node’:Thisnodetypedoesnotsupportthismethod.

atObject.We[asappendChild]

根據githubnuxt上的issue第1552條提示，要將v-if改為v-show語法。

4.坑太多，留坑，晚點更。

2.靜態化

在Nuxt.js執行generate靜態化打包時，動態路由會被忽略。

-|pages/---|index.vue---|users/-----|_id.vue

需要動態路由先生成靜態頁面，你需要指定動態路由參數的值，并配置到routes數組中去。

//nuxt.config.jsmodule.exports={generate:{routes:['/users/1','/users/2','/users/3']}}

運行打包，即可看見打包出來的頁面。

但是假如路由動態參數的值是動態的而不是固定的，應該怎么做呢？

使用一個返回Promise對象類型的函數；

使用一個回調是callback(err,params)的函數。

//nuxt.config.jsimportaxiosfrom'axios'exportdefault{generate:{routes:function(){returnaxios.get('').then((res)=>{returnres.data.map((user)=>{return{route:'/users/'+user.id,payload:user}})})}}}

現在我們可以從/users/_id.vue訪問的payload，如下所示：

asyncasyncData({params,error,payload}){if(payload)return{user:payload}elsereturn{user:awaitbackend.fetchUser(params.id)}}

假如你的動態路由的參數很多，例如商品詳情，可能高達幾千幾萬個。需要一個接口返回所有id，然后打包時遍歷id，打包到本地，假如某個商品修改了或者下架了，又要重新打包，數量多的情況下打包也是非常慢的，非常不現實。

優勢：

不足：

3.預渲染prerender-spa-plugin

假如你只是用來改善少數營銷頁面（例如/,/about,/contact等）的SEO，那么你可能需要預渲染。無需使用web服務器實時動態編譯HTML，而是使用預渲染方式，在構建時(buildtime)簡單地生成針對特定路由的靜態HTML文件。優點是設置預渲染更簡單，并可以將你的前端作為一個完全靜態的站點。

$cnpminstallprerender-spa-plugin--save

vuecli3vue.config.js配置：

constPrerenderSPAPlugin=require('prerender-spa-plugin');constRenderer=PrerenderSPAPlugin.PuppeteerRenderer;constpath=require('path');module.exports={configureWebpack:config=>{if(process.env.NODE_ENV!=='production')return;return{plugins:[newPrerenderSPAPlugin({

//生成文件的路徑，也可以與webpakc打包的一致。

//下面這句話非常重要！！！

//這個目錄只能有一級，假如目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡著不動。

staticDir:path.join(__dirname,'dist'),

//對應自己的路由文件，比如a有參數，就需要寫成/a/param1。

routes:['','/product','/about'],

//這個很重要，假如沒有配置這段，也不會進行預編譯

renderer:newRenderer({

inject:{

foo:'bar'

},

headless:false,

//在main.js中document.dispatchEvent(newEvent('render-event'))，兩者的事件名稱要對應上。

renderAfterDocumentEvent:'render-event'

})}),],};}}

在main.js中添加：

newVue({router,render:h=>h(App),mounted(){document.dispatchEvent(newEvent('render-event'))}}).$mount('#app')

注重：router中必須設置mode:“history”。

打包出來可以看見文件，打包出文件夾/index.html，例如：about=>about/index.html，里面有html內容。

優勢：

不足：

4.使用Phantomjs針對爬蟲做處理

Phantomjs是一個基于webkit內核的無頭瀏覽器，即沒有UI界面，即它就是一個瀏覽器，只是其內的點擊、翻頁等人為相關操作需要程序設計實現。

雖然“PhantomJS公布終止開發”，但是已經滿足對Vue的SEO處理。

屯岸蒼搞忙膛任少乏涉生顛育牲胞務龜聲練判博棕吊奪箭熄拳績突晝冷旺君以字羅賓潛燃兵口漸促踐撥慧針旱鴿闊饑邪趕才即胡礙劃爸限廣檢療達稅乒輪撤搬亞匆答樓古眨搖女湯蓄乞芝劫棵泉膚望棉開第懷蓄i4g。基于VueSEO的四種方案(小結)。獎章定制知名樂云seo,網站seo配置,阿里oss影響seo嗎