腳本之家服務器常用軟件

快捷導航

Vue基于NUXT的SSR詳解

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

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

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

SSR

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8>
  <title>iDareX敢玩</title>
  <meta name=keywords content="敢玩, iDareX, 敢玩TV, 敢玩活動, 敢玩自頻道, 敢玩主題, 戶外, 極限運動, 周邊游, 探險, 時尚, 新潮, 運動視頻, 體育, 新奇, 生活方式, 刺激, 驚險, 戶外裝備, 達人, 90后">
  <meta name=description content=自2014年10月創(chuàng)辦以來，敢玩專注于極限戶外和娛樂體育。從頑童、玩具、玩法三個方面，產(chǎn)出更專注于‘玩'的內(nèi)容，已打造了一系列深受喜愛的娛樂體育真人秀和引爆網(wǎ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>

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

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

另外 SSR 還適用以下場景

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

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

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

NUXT

我們進入正題說下 NUXT

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

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

安裝流程

Nuxt.js 團隊提供了 vue-cli 的初始化模板。前提安裝 vue-cli，安裝過的忽略此步

npm install -g vue-cli

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

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

依賴安裝完成后

npm run dev

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

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

目錄結(jié)構

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

Nuxt.js 給出了最簡單的目錄結(jié)構

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

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

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

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

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

路由

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

例1:

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

會生成

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

會生成

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

配置文件

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

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

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

cache
loading
router
css
plugins
head

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

NUXT 能為我們做什么

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

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

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

總結(jié)