繼vue的seo問題之後，反響很強烈，也得到了大家的認可，但是我對vue的seo也僅僅停留在理論方面，並沒有實際進行過優化，也不知道具體效果會是什麼樣的，恰巧公司官網上線三個月後需求增加不是那麼多，所以想停下來先對官網進行優化。

首先是選擇哪種方案進行優化，上篇文章提到過，vue的seo解決方案有很多種，常見的如下

1. vue官方服務端渲染
2. vue-meta-info
3. nuxt
4. phantomjs

等等，首先我只調研了兩種，vue官方的解決方案和nuxt。

vue官方的解決方案並不複雜（不要被ssr這個詞嚇到），這個是服務端預渲染，需要後端配合，我做的是通過node解析前端網頁的，但是也就是因為這個，需要後端配合，這明明是前端優化，還要說服後端（這估計是所有前端不遠面對的，畢竟介面讓他多傳一個欄位就得說半天），所以我果斷放棄了這個方案。

後來我看了nuxt官網，發現這個成本是非常低的，如果你的網站不大，通常兩天時間就能遷移完成（我們公司的官網花了一週時間）。這其實對於一個專案的優化是可以接受的，畢竟如果這個做好了是可以為公司創造收益的。

關於nuxt框架具體怎麼用，這裡就不多介紹了，因為官網說的很詳細，地址，下面說一下從老專案遷移到新專案具體的過程：

1.依賴如何處理

nuxt官網外掛部分提到，如果想使用一個外掛，首先下載外掛，然後在plugins目錄下新建關於該外掛的檔案，然後引入改外掛，我們以element-ui外掛為例：

首先在plugins目錄下新建element.js,在檔案中匯入element-ui

import Vue from 'vue'
import VTooltip from 'element-ui'
Vue.use(element-ui)
 

接下來在nuxt.config.js中引用改模組：

export default {
  plugins: [
     '~/plugins/element.js'
  ]
}

因為plugins的資料結構是陣列，所以我們可以新增任何我們想新增的依賴。

頁面中資料請求如何操作

nuxt資料請求和之前就有些出入了，我們需要把請求的介面放在asyncData函式中，asyncData函式有點像vue3中的組合式 API,我們需要把所有的介面整合在asyncData中, 寫法如下：

async asyncData({ $axios }) {
    const getList1 = await $axios.$get('介面1')
    const getList2 = await $axios.$get('介面2')
    return { getList1, getList2 }
}
 

當然我們也可以對我們的請求新增很多配置，比如請求頭，代理等等，具體可以檢視nuxt/axios

老專案中的程式碼如何遷移

這裡建議，在拷貝程式碼的時候，一個模組一個模組的操作，避免一次性出現太多bug的時候無法排查，這裡說的包含一個模組所有的檔案，包含api, css，元件，工具類，區域性依賴等等，這裡的順序建議如下：

1. 先拷貝元件程式碼，因為元件才是最核心的程式碼，一般其他所有的檔案都和元件有關
2. 拷貝樣式檔案，拷貝完後，需要將樣式匯入在nuxt.config.js中引用該樣式檔案
3. 拷貝其他檔案，這時候我們就可以有針對性的修改我們的元件了，或者我們在構建的時候後臺會有報錯，這都需要我們一個一個的解決

其他關於seo的細節

這個就是我們老生常談的問題了，我們在寫vue之前就已經非常熟悉了，比如一個網頁只能有一個h1，給圖片加title等等，這裡就不一一介紹了，前幾天我看了一篇文章前端seo優化寫的很詳細，可以按照裡邊的一一修改

除了修改程式碼，我們還能做些什麼

按照百度的說法，如果一個網站被認證過，那麼他被抓取的機會也會有所提高，所以我特意去查了一下認證的價格，新增一個官網的標識一年也就三千多塊錢，這對一個企業來說應該算不什麼錢，況且網頁收錄的多了，提高的收益可不只3000，所以我們要想好好做，可以去申請一下。傳送門

看一下我們網站的最後效果

其實效果還是挺明顯的，我們可以右鍵檢視原始碼，幾乎所有的網站結構都出來了。

這個是首頁的

這個是列表頁的

我們開一下百度的收錄情況

收錄的不僅是首頁和一級選單頁面，而且連小區和房源詳情頁面也有收錄

谷歌收錄情況

所以，綜上所述，使用nuxt提升網站的收錄是非常有效果的，而且成本不高，難度也不大，我們可以在此基礎上根據自己網站的實際情況做有針對性的優化。

原創不易，如果這篇文章對你有幫助，點個贊吧！（手動下跪）

如果想閱讀更多精彩的技術文章，歡迎關注【鳳凰城下的小碼農】vx公號，更有海量資源免費領取。