vue-meta-info 官方地址： monkeyWangs/vue-meta-info

創(chuàng)新互聯(lián)公司長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為樺甸企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、網(wǎng)站建設(shè)，樺甸網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

（設(shè)置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prerender-spa-plugin形成更優(yōu)的配合）

單頁面應(yīng)用在前端正大放光彩。三大框架 Angular、Vue、React，可謂婦孺皆知。隨著單頁面應(yīng)用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發(fā)效率的同時，也似乎不可避免的要去處理 SEO 的需求。

本文主要針對 vue 2.0 單頁面 Meta SEO 優(yōu)化展開介紹：

其實解決SEO問題不一定非得用服務(wù)端渲染來處理，服務(wù)端渲染對于剛接觸 vue 的新手來說，并不是那么友好，雖然已有官方 SSR 中文文檔。但是對于一個已經(jīng)開發(fā)完畢的 vue 項目去接 SSR 無論是從工作量還是技術(shù)角度來說，都是一種挑戰(zhàn)。不過這些怎么能難得到偉大的前端程序員！

如果您調(diào)研服務(wù)器端渲染(SSR)只是用來改善少數(shù)營銷頁面（例如 /, /about, /contact 等）的 SEO，那么您可能需要預渲染。無需使用 web 服務(wù)器實時動態(tài)編譯 HTML，而是使用預渲染方式，在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點是設(shè)置預渲染更簡單，并可以將您的前端作為一個完全靜態(tài)的站點。

如果您使用 webpack，您可以使用 prerender-spa-plugin 輕松地添加預渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測試。

預渲染為SEO提供了另一種可能，簡單的來說，預渲染就是當vue-cli構(gòu)建的項目進行npm run build 的時候，會按照路由的層級進行動態(tài)渲染出對應(yīng)的html文件。

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
 // ...
 plugins: [
  new PrerenderSpaPlugin(
   // 編譯后的html需要存放的路徑
   path.join(__dirname, '../dist'),
   // 列出哪些路由需要預渲染
   [ '/', '/about', '/contact' ]
  )
 ]
}

當前題目：詳解處理Vue單頁面應(yīng)用SEO的另一種思路-創(chuàng)新互聯(lián)
文章位置：http://www.chinadenli.net/article22/dccojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、電子商務(wù)、云服務(wù)器、網(wǎng)站導航、網(wǎng)站設(shè)計、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)