Nuxt.js服務(wù)端渲染seo頁(yè)面優(yōu)化

其實(shí)就是為了解決SEO的問(wèn)題。如果SPA應(yīng)用也有良好的SEO，就不用服務(wù)器端渲染這么麻煩了。當(dāng)然服務(wù)器端渲染能解決的首屏加載速度的問(wèn)題也是原因之一。

為什么要用服務(wù)器端渲染？

優(yōu)點(diǎn)

· 有利于SEO。

· 首屏加載速度快。因?yàn)?/font>SPA引用需要在首屏獲取所有資源，而服務(wù)器端渲染直接拿了成品展示出來(lái)就行了。

· 無(wú)需占用客戶端資源。解析模板工作交給服務(wù)器完成，對(duì)于客戶端資源占用更少。

缺點(diǎn)

· 占用服務(wù)器資源。服務(wù)器端完成html模板解析，如果請(qǐng)求較多，會(huì)對(duì)服務(wù)器造成一定的訪問(wèn)壓力。

· 不利于前后端分離。

Nuxt.js

Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。預(yù)設(shè)了服務(wù)器端渲染所需的各種配置，如異步數(shù)據(jù)，中間件，路由，只要遵循其中的規(guī)則就能輕松實(shí)現(xiàn)SSR，只需要按照對(duì)應(yīng)的文件夾層級(jí)創(chuàng)建 .vue 文件就行，nuxt 會(huì)在模板輸出之前異步請(qǐng)求數(shù)據(jù)，內(nèi)置了 webpack，nuxt 會(huì)根據(jù)配置打包對(duì)應(yīng)的文件。

node安裝

node官網(wǎng)安裝（nodejs.cn/）

安裝 cnpm
使用淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org

nuxt 項(xiàng)目創(chuàng)建

創(chuàng)建：vue init nuxt-community/starter-template <project-name>

安裝依賴：npm install

運(yùn)行： npm run dev

http://localhost:3000 頁(yè)面運(yùn)行地址!

nuxt 項(xiàng)目目錄

我自己創(chuàng)建的項(xiàng)目結(jié)構(gòu)，結(jié)合官網(wǎng)項(xiàng)目結(jié)構(gòu)就能知道每個(gè)文件夾是干什么的。

nuxt.config.js這是nuxt 的配置js文件官網(wǎng)也有對(duì)應(yīng)參數(shù)意義。

nuxt 項(xiàng)目講解

nuxt.js官網(wǎng)也給出了一個(gè)完整的服務(wù)器請(qǐng)求到渲染的流程圖

nuxt路由機(jī)制

pages目錄中的任何Vue組件都會(huì)基于他們的文件名稱和目錄結(jié)構(gòu)自動(dòng)添加到vue-router中。Nuxt可以生成對(duì)應(yīng)的路由配置

assets和static

assets包含未編譯的資源，與nuxt如何工作沒有太多關(guān)系。

static包含一些映射到你的站點(diǎn)的根目錄的靜態(tài)文件。

middleware

中間件（middleware）是允許你定義一個(gè)自定義函數(shù)比如我們?cè)阡秩卷?yè)面之前判斷權(quán)限的攔截，或者根據(jù)用戶權(quán)限跳轉(zhuǎn)到相應(yīng)的路由等。

1、首先我們需要在middleware文件夾中添加auth.js

2、在nuxt.config.js文件中配置

plugins

以配置需要在vue應(yīng)用實(shí)例化之前需要運(yùn)行的js插件，可以是你自己寫的庫(kù)或是第三方庫(kù)。

在nuxt.config.js中配置plugins字段

nuxt.config.js文件其他配置

· head 一般用于配置默認(rèn)的meta標(biāo)簽

· css 用于定義應(yīng)用的全局樣式文件，模塊或第三方庫(kù)

· loading 個(gè)性化定制加載組建

· env 定義用于客戶端和服務(wù)端的環(huán)境變量

nuxt部署

打包編譯： npm run build

將文件夾都要拖動(dòng)到nginx中html中，除了node_moudles

node_modules 也是在當(dāng)前文件夾中 npm install 安裝依賴
運(yùn)行 npm start 將nuxt的服務(wù)器運(yùn)行才能實(shí)現(xiàn)ssr服務(wù)器渲染

進(jìn)程守護(hù)

我在前面提到要npm start 才能啟用服務(wù)器，在windows下，會(huì)有一個(gè)窗口，項(xiàng)目就是運(yùn)行的，窗口不在，項(xiàng)目就是關(guān)閉的，不可能一個(gè)窗口一直存在，所以需要一個(gè)后臺(tái)來(lái)執(zhí)行，liunx好像也有自己的命令來(lái)啟動(dòng)一個(gè)后臺(tái)進(jìn)程，我并沒有嘗試，我是直接選擇的pm2

cnpm install -g pm2 安裝進(jìn)程守護(hù)

進(jìn)程后臺(tái)啟動(dòng) pm2 start npm --name "your-project-name" -- start --watch

加上watch 的屬性可以觀察項(xiàng)目文件變化，重啟我們的項(xiàng)目nuxt 這樣就不用每次更新項(xiàng)目

nginx的相關(guān)配置

上面3000端口是我們的nuxt的運(yùn)行端口，nginx監(jiān)聽一下我們nuxt的端口就可以用nginx下面的ip訪問(wèn)了。