不可否定的是，vue現在火。但是在實際專案中，特別是像一下互動**，我們不可避免會考慮到的是seo問題，這直接關係到我們**的排名，很多人說用vue搭建的**不能做優化，那我們真的要放棄vue，放棄前後端分離開發麼？首先，可以肯定的是前後端分離不利於seo，為什麼呢？
1.搜尋引擎的基礎爬蟲的原理就是抓取你的url，然後獲取你的html源**並解析。 而你的頁面通常用了vue等js的資料繫結機制來展示頁面資料，爬蟲獲取到的html是你的模型頁面而不是最終資料的渲染頁面，所以說用js來渲染資料對seo並不友好。
2.seo 本質是乙個伺服器向另乙個伺服器發起請求，解析請求內容。但一般來說搜尋引擎是不回去執行請求到的js的。也就是說，如果乙個單頁應用，html在伺服器端還沒有渲染部分資料資料，在瀏覽器才渲染出資料，而搜尋引擎請求到的html是沒有渲染資料的。 這樣就很不利於內容被搜尋引擎搜尋到。 所以服務端渲染就是盡量在伺服器傳送到瀏覽器前 頁面上就是有資料的。
3.一般的資料邏輯操作是放在後端的。排序這個如果僅僅是幾條資料，前後端排序開起來是一樣的，如果是有1000條資料，前端要排序就要都請求過來。這樣顯然是不合理的。
這就代表互動**不用vue做麼？當然不是。
無意間在知乎看見vue的作者是這麼說的：
1. 頁面預渲染
2. 服務端渲染
3. 路由採用h5 history模式
而應用到的技術也是有很多，大體上我總結了四個，也是比較常用的：
第一，ssr,vue官方文件給出的伺服器渲染方案，這是一套完整的構建vue服務端渲染應用的指南，具體參考
第二，vue-meta-info，這個是針對單頁面的meta seo的另一種思路，參考**
第三，nuxt 簡單易用，參考**
第四，phantomjs 頁面預渲染，具體參考 phantomjs.org
而市場上依靠vue做出來的唱功案例還是很多的：
那麼他們是如何做優化的呢？我們通過分析，總結以下幾點
1） bilibili做了基本的seo優化，比如
2） 掘金**使用了vue-meta-info 管理**的meta，應該配合使用了prerender-spa-plugin 對seo進行了優化
3） element在logo上加了首頁的位址，並且只有logo是放在h1標籤中。
4） 有一些流量不太高的**比如 （marshall university）做了seo社會化分享優化，在meta資訊**現了property=」og:title」這種新東西； （大疆招聘）使用了nuxt
1） 麵包屑導航
2） icon
3） 搜尋框
4） button元件
關於收錄問題：
一是主動出擊發現抓取
這只是我片面的分析，具體情況我們還要根據**定位，開發成本，後期的維護成本等綜合考慮，但是我覺得掘金真的是乙個非常成功的案例，既然有人給我們邁出了這一步，我們也要緊跟潮流，畢竟網際網路是乙個與時俱進的行業。如果我們永遠停留在傳統的混合開發，也會給我們的公司，給我們個人帶來一些影響。
不可否定的是，vue現在火。但是在實際專案中，特別是像一下互動**，我們不可避免會考慮到的是seo問題，這直接關係到我們**的排名，很多人說用vue搭建的**不能做優化，那我們真的要放棄vue，放棄前後端分離開發麼？首先，可以肯定的是前後端分離不利於seo，為什麼呢？
1.搜尋引擎的基礎爬蟲的原理就是抓取你的url，然後獲取你的html源**並解析。 而你的頁面通常用了vue等js的資料繫結機制來展示頁面資料，爬蟲獲取到的html是你的模型頁面而不是最終資料的渲染頁面，所以說用js來渲染資料對seo並不友好。
2.seo 本質是乙個伺服器向另乙個伺服器發起請求，解析請求內容。但一般來說搜尋引擎是不回去執行請求到的js的。也就是說，如果乙個單頁應用，html在伺服器端還沒有渲染部分資料資料，在瀏覽器才渲染出資料，而搜尋引擎請求到的html是沒有渲染資料的。 這樣就很不利於內容被搜尋引擎搜尋到。 所以服務端渲染就是盡量在伺服器傳送到瀏覽器前 頁面上就是有資料的。
3.一般的資料邏輯操作是放在後端的。排序這個如果僅僅是幾條資料，前後端排序開起來是一樣的，如果是有1000條資料，前端要排序就要都請求過來。這樣顯然是不合理的。
這就代表互動**不用vue做麼？當然不是。
無意間在知乎看見vue的作者是這麼說的：
1. 頁面預渲染
2. 服務端渲染
3. 路由採用h5 history模式
而應用到的技術也是有很多，大體上我總結了四個，也是比較常用的：
第一，ssr,vue官方文件給出的伺服器渲染方案，這是一套完整的構建vue服務端渲染應用的指南，具體參考
第二，vue-meta-info，這個是針對單頁面的meta seo的另一種思路，參考**
第三，nuxt 簡單易用，參考**
第四，phantomjs 頁面預渲染，具體參考 phantomjs.org
而市場上依靠vue做出來的唱功案例還是很多的：
那麼他們是如何做優化的呢？我們通過分析，總結以下幾點
1） bilibili做了基本的seo優化，比如
2） 掘金**使用了vue-meta-info 管理**的meta，應該配合使用了prerender-spa-plugin 對seo進行了優化
3） element在logo上加了首頁的位址，並且只有logo是放在h1標籤中。
4） 有一些流量不太高的**比如 （marshall university）做了seo社會化分享優化，在meta資訊**現了property=」og:title」這種新東西； （大疆招聘）使用了nuxt
1） 麵包屑導航
2） icon
3） 搜尋框
4） button元件
關於收錄問題：
一是主動出擊發現抓取
這只是我片面的分析，具體情況我們還要根據**定位，開發成本，後期的維護成本等綜合考慮，但是我覺得掘金真的是乙個非常成功的案例，既然有人給我們邁出了這一步，我們也要緊跟潮流，畢竟網際網路是乙個與時俱進的行業。如果我們永遠停留在傳統的混合開發，也會給我們的公司，給我們個人帶來一些影響。
關於vue專案的seo問題
不可否定的是，vue現在火。但是在實際專案中，特別是像一下互動 我們不可避免會考慮到的是seo問題，這直接關係到我們 的排名，很多人說用vue搭建的 不能做優化，那我們真的要放棄vue，放棄前後端分離開發麼？首先，可以肯定的是前後端分離不利於seo，為什麼呢？1.搜尋引擎的基礎爬蟲的原理就是抓取你的...
關於vue專案的建立
1 對於新手來說，直接去官網看vue官方文件和ivew官方文件，想要練習的話，首先知道要去搭建vue環境，網上關於環境搭建很多，一般來說安裝node好node環境和 映象以後就好了，不需要按照一般的說法去初始化乙個工程，這樣你會發現裡面的專案目錄對於新手來說，會看的特別不清楚 3 首先建立乙個目錄，...
關於Vue專案的router分檔案
在寫乙個前端檔案的時候採用了vue elementui的框架。知道利用component將元件分開，那麼router裡面的index.js按理說應該也可以分開。第一步 建立乙個單獨的路由檔案。在router檔案下建立乙個test.js檔案。新增需要的元件 import test from compo...