快捷導(dǎo)航

Vue基于NUXT的SSR詳解

更新時(shí)間：2017年10月24日 10:42:02 作者：orangexc

這篇文章主要介紹了Vue基于NUXT的SSR詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了Vue基于NUXT的SSR，分享給大家，也給自己留個(gè)筆記。

SSR

首先說下 SSR，最近很熱的詞，意為 Server Side Rendering（服務(wù)端渲染），目的是為了解決單頁面應(yīng)用的 SEO 的問題，對(duì)于一般網(wǎng)站影響不大，但是對(duì)于論壇類，內(nèi)容類網(wǎng)站來說是致命的，搜索引擎無法抓取頁面相關(guān)內(nèi)容，也就是用戶搜不到此網(wǎng)站的相關(guān)信息。

抓取頁面的前提是 html 含有被抓取內(nèi)容，我們不妨看看基于 vue 的線上 SPA 頁面請(qǐng)求時(shí)返回了什么

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8>
  <title>iDareX敢玩</title>
  <meta name=keywords content="敢玩, iDareX, 敢玩TV, 敢玩活動(dòng), 敢玩自頻道, 敢玩主題, 戶外, 極限運(yùn)動(dòng), 周邊游, 探險(xiǎn), 時(shí)尚, 新潮, 運(yùn)動(dòng)視頻, 體育, 新奇, 生活方式, 刺激, 驚險(xiǎn), 戶外裝備, 達(dá)人, 90后">
  <meta name=description content=自2014年10月創(chuàng)辦以來，敢玩專注于極限戶外和娛樂體育。從頑童、玩具、玩法三個(gè)方面，產(chǎn)出更專注于‘玩'的內(nèi)容，已打造了一系列深受喜愛的娛樂體育真人秀和引爆網(wǎng)絡(luò)的運(yùn)動(dòng)視頻。!>
  <meta name=renderer content=webkit>
  <meta name=force-rendering content=webkit>
  <meta name=viewport content="width=1140">
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <link rel="shortcut icon" href=static/favicon.ico type=image/x-icon>
  <link href=/static/css/app.eef5b81a3d1bee5054a791f452a34147.css rel=stylesheet>
 </head>
 <body>
  <div id=app></div>
  <script type=text/javascript src=/static/js/manifest.6d0adb8f2d8884be1c03.js></script>
  <script type=text/javascript src=/static/js/vendor.ec1cc90c9847c434ba7d.js></script>
  <script type=text/javascript src=/static/js/app.d7fd10ae7e4a68598037.js></script>
 </body>
</html>

我們的組件都是這個(gè) html 文件返回后再渲染到 <div id=app></div> 里的。這就合理的解釋了 SEO 缺陷的原因。

既然說到 SSR 可以解決 SEO 的問題，不難想到原理就是將我們的 html 在服務(wù)端渲染，合成完整的 html 文件再輸出到瀏覽器。

另外 SSR 還適用以下場(chǎng)景

客戶端的網(wǎng)絡(luò)比較慢
客戶端運(yùn)行在老的或者直接沒有 JavaScript 引擎上

vue 官網(wǎng)給出了 SSR 原理圖片

對(duì)于這幅圖的原理官網(wǎng)有詳細(xì)解釋，此類文章也很多，這里不贅述。

NUXT

我們進(jìn)入正題說下 NUXT

Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)

作用就是在 node.js 上進(jìn)一步封裝，然后省去我們搭建服務(wù)端環(huán)境的步驟，只需要遵循這個(gè)庫的一些規(guī)則就能輕松實(shí)現(xiàn) SSR

安裝流程

Nuxt.js 團(tuán)隊(duì)提供了 vue-cli 的初始化模板。前提安裝 vue-cli，安裝過的忽略此步

npm install -g vue-cli

完成后在需要?jiǎng)?chuàng)建的目錄下執(zhí)行以下

vue init nuxt/starter <project-name>
cd <project-name>
npm install

依賴安裝完成后

npm run dev

打開瀏覽器 http://localhost:3000

說明：Nuxt.js 會(huì)監(jiān)聽 pages 目錄下的改變，添加新 page 的時(shí)候不需要重啟服務(wù)

目錄結(jié)構(gòu)

完成上面命令后你的目錄結(jié)構(gòu)會(huì)如下

Nuxt.js 給出了最簡(jiǎn)單的目錄結(jié)構(gòu)

|-- pages
  |-- index.vue
|-- package.json

也就是說，至少需要一個(gè) page 來作為展示頁。

文件的路徑建議都采用絕對(duì)路徑，表格如下

例：怎么在 /pages/user/me.vue 引入一個(gè) static 文件夾里的圖片

<img src="~static/img/logo.png" alt="Logo"/>

路由

Nuxt.js 根據(jù) pages 目錄結(jié)構(gòu)去生成 vue-router 配置，也就是說 pages 目錄的結(jié)構(gòu)直接影響路由結(jié)構(gòu)

例1:

|-- pages
  |-- posts
    |-- index.vue
    |-- welcome.vue
  |-- about.vue
  |-- index.vue

會(huì)生成

routes: [
 {
  path: '/posts',
  component: '~pages/posts/index.vue'
 }, {
  path: '/posts/welcome',
  component: '~pages/posts/welcome.vue'
 }, {
  path: '/about',
  component: '~pages/about.vue'
 }, {
  path: '/',
  component: '~pages/index.vue'
 }
]

例2:隱藏路由

在文件名前加 _

|-- pages
  |-- _about.vue
  |-- index.vue

會(huì)生成

routes: [
 {
  path: '/',
  component: '~pages/index.vue'
 }
]

配置文件

目錄下的 nuxt.config.js 是我們唯一的配置入口，這里不建議修改 .nuxt 目錄，除非特殊需求

默認(rèn)的給力我們?nèi)齻€(gè)配置 ·head·css·loading· 分別是頭部設(shè)置，全局css，loading進(jìn)度條

nuxt.config.js 的全部的配置如下,點(diǎn)擊查看具體例子

cache
loading
router
css
plugins
head

另外還提供了 vuex 等配置，感興趣可以去 github 和官網(wǎng)。

NUXT 能為我們做什么

對(duì)于使用就說上面這么多（官網(wǎng)上都有，這里給大家一個(gè)概覽），說下為什么選擇 NUXT 來做 SSR

問題1：就是我們無需為了路由劃分而煩惱，你只需要按照對(duì)應(yīng)的文件夾層級(jí)創(chuàng)建 .vue 文件就行
問題2：無需考慮數(shù)據(jù)傳輸問題，nuxt 會(huì)在模板輸出之前異步請(qǐng)求數(shù)據(jù)（需要引入 axios 庫），而且對(duì) vuex 有進(jìn)一步的封裝
問題3：內(nèi)置了 webpack，省去了配置 webpack 的步驟，nuxt 會(huì)根據(jù)配置打包對(duì)應(yīng)的文件

還有很多便捷之處，可以嘗試去寫一寫，讀讀源碼

總結(jié)