Nuxt中Vue.js服務端渲染的示例分析

這篇文章主要為大家展示了“Nuxt中Vue.js服務端渲染的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Nuxt中Vue.js服務端渲染的示例分析”這篇文章吧。

服務端渲染

服務端渲染（Server Side Render）并不是一個新的概念，在單頁應用（SPA）還沒有流行起來的時候，頁面就是通過服務端渲染好，并傳遞給瀏覽器的。當用戶需要訪問新的頁面時，需要再次請求服務器，返回新的頁面。

為了優化體驗，開發者們開始選擇采用 JavaScript 在前端完成渲染過程，用前后端分離的手段，使后端更專注于數據，而前端注重于處理展示，通過設計良好的 API 以及 Ajax 技術完成前后端的交互，jQuery、React.js、Vue.js、Angular.js 等框架應運而生。

這些框架給開發者帶來了巨大的便利，但是對于一些論壇、資訊網站、或是企業的官方網站來說，他們對 搜索引擎優化（SEO） 有強烈的要求，而前端渲染技術是無法滿足他們的需求的。如果無法通過搜索引擎的搜索輸出自身的內容，那么網站的價值就會大大受影響，要解決這類問題，還是要靠服務端渲染。

本文會介紹 Vue.js 的服務端渲染解決方案 Nuxt.js。Vue.js 推出后，其數據驅動和組件化思想，以及簡潔易上手的特性給開發者帶來了巨大的便利，Vue.js 官方提供的 vue-server-renderer 可以用來進行服務端渲染的工作，但是需要增加額外的工作量，開發體驗仍有待提高，而 Nuxt.js 推出后，這個問題被很好的解決了。

Nuxt.js 簡介

Nuxt.js 是一個基于 Vue.js 的通用應用框架，Nuxt.js 預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置，并且可以一鍵生成靜態站點。同時，Nuxt.js 的熱加載機制可以使開發者非常便捷的進行網站的開發。

Nuxt.js 于 2016 年 10 月 25 號發布，上線還不足一年，但是已經受到了廣泛的好評，最新的穩定版本是 0.10.7，目前仍在進行 1.0 版本的內測，Nuxt.js 社區也在逐步完善中，官網已經支持了中文文檔。

簡單上手

Vue.js 的 vue-cli 工具可以很方便的讓我們使用現成的模板初始化 Vue.js 項目，而 Nuxt.js 團隊已經為我們提供了初始化 Nuxt.js 項目的模板，安裝 vue-cli 后，只需在命令行中輸入

vue init nuxt/starter <projectName>

即可完成項目的創建工作，然后進入項目目錄中執行以下命令:

npm installnpm run dev

Nuxt.js 會使用 3000 端口運行服務，在瀏覽器中輸入 http://localhost:3000 就可以看到一個帶有 Nuxt.js 的 logo 的原始的頁面了。

項目目錄

完成了一個簡單的 Hello World 項目后，我們來進一步研究 Nuxt.js。進入 Nuxt.js 項目后，項目目錄如下：

下面簡要介紹一下各個目錄的作用：

.nuxt/ ：用于存放 Nuxt.js 的核心庫文件。例如，你可以在這個目錄下找到 server.js 文件，描述了 Nuxt.js 進行服務端渲染的邏輯（參見下一段 “Nuxt.js 的渲染流程”）， router.js 文件包含一張自動生成的路由表。

assets/ ：用于存放靜態資源，該目錄下的資源使用 Webpack 構建。

components/ ：存放項目中的各種組件。注意，只有在這個目錄下的文件才能被稱為 組件 。

layouts/ ：創建自定義的頁面布局，可以在這個目錄下創建全局頁面的統一布局，或是錯誤頁布局。如果需要在布局中渲染 pages 目錄中的路由頁面，需要在布局文件中加上 <nuxt /> 標簽。

middleware/ ：放置自定義的中間件，會在加載組件之前調用。

pages/ ：在這個目錄下，Nuxt.js 會根據目錄的結構生成 vue-router 路由，詳見下文。

plugins/ ：可以在這個目錄中放置自定義插件，在根 Vue 對象實例化之前運行。例如，可以將項目中的埋點邏輯封裝成一個插件，放置在這個目錄中，并在 nuxt.config.js 中加載。

static/ ：不使用 Webpack 構建的靜態資源，會映射到根路徑下，如 robots.txt

store/ ：存放 Vuex 狀態樹。

nuxt.config.js ：Nuxt.js 的配置文件，詳見下文。

Nuxt.js 的渲染流程

Nuxt.js 通過一系列構建于 Vue.js 之上的方法進行服務端渲染，具體流程如下:

調用 nuxtServerInit 方法

當請求打入時，最先調用的即是 nuxtServerInit 方法，可以通過這個方法預先將服務器的數據保存，如已登錄的用戶信息等。另外，這個方法中也可以執行異步操作，并等待數據解析后返回。

Middleware 層

經過第一步后，請求會進入 Middleware 層，在該層中有三步操作：

讀取 nuxt.config.js 中全局 middleware 字段的配置，并調用相應的中間件方法 匹配并加載與請求相對應的 layout 調用 layout 和 page 的中間件方法

調用 validate 方法

在這一步可以對請求參數進行校驗，或是對第一步中服務器下發的數據進行校驗，如果校驗失敗，將拋出 404 頁面。

調用 fetch 及 asyncData 方法

這兩個方法都會在組件加載之前被調用，它們的職責各有不同， asyncData 用來異步的進行組件數據的初始化工作，而 fetch 方法偏重于異步獲取數據后修改 Vuex 中的狀態。

我們在 Nuxt.js 的源碼 util.js 中可以看到以下方法：

export function applyAsyncData (Component, asyncData = {}) {
 const ComponentData = Component.options.data || noopData
 Component.options.data = function () {
  const data = ComponentData.call(this)
  return { ...data, ...asyncData }
 }
 if (Component._Ctor && Component._Ctor.options) {
  Component._Ctor.options.data = Component.options.data
 }
}

這個方法會在 asyncData 方法調用完畢后進行調用，可以看到，組件從 asyncData 方法中獲取的數據會和組件原生的 data 方法獲取的數據做一次合并，最終仍然會在 data 方法中返回，所以得出， asyncData 方法其實是原生 data 方法的擴展。

經過以上四步后，接下來就是渲染組件的工作了，整個過程可以用下圖表示：

（圖片來源：Nuxt.js 官網）

如上文所述，在 .nuxt 目錄下，你可以找到 server.js 文件，這個文件封裝了 Nuxt.js 在服務端渲染的邏輯，包括一個完整的 Promise 對象的鏈式調用，從而完成上面描述的整個服務端渲染的步驟。

Nuxt.js 的一些使用技巧

nuxt.config.js 的配置

nuxt.config.js 是 Nuxt.js 的配置文件，可以通過針對一系列參數的設置來完成 Nuxt.js 項目的配置，可以在Nuxt.js 官網 找到針對這個文件的說明，下面舉例一些常用的配置：

head: 可以在這個配置項中配置全局的 head ，如定義網站的標題、 meta ，引入第三方的 CSS、JavaScript 文件等：

head: {
   title: '百姓店鋪',
   meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'applicable-device', content: 'pc,mobile' },
   ],
   link: [
      { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'}
   ],
   script: [
      {src: 'https://code.jquery.com/jquery-3.1.1.min.js'},
      {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
   ]
 },

build: 這個配置項用來配置 Nuxt.js 項目的構建規則，即 Webpack 的構建配置，如通過 vendor 字段引入第三方模塊，通過 plugin 字段配置 Webpack 插件，通過 loaders 字段自定義 Webpack 加載器等。通常我們會在 build 的 vendor 字段中引入 axios 模塊，從而在項目中進行 HTTP 請求（ axios 也是 Vue.js 官方推薦的 HTTP 請求框架）。

build: {
   vendor: ['core-js', 'axios'],
   loaders: [
     {
       test: /\.(scss|sass)$/,
       use: [{
         loader: "style-loader"
       }, {
         loader: "css-loader"
       }, {
         loader: "sass-loader"
       }]
     },
     {
       test: /\.(png|jpe?g|gif|svg)$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'img/[name].[hash:7].[ext]'
       }
     },
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       query: {
         limit: 1000,
         name: 'fonts/[name].[hash:7].[ext]'
       }
     }
   ]
 }

css: 在這個配置項中，引入全局的 CSS 文件，之后每個頁面都會被引入。

router: 可以在此配置路由的基本規則，以及進行中間件的配置。例如，你可以創建一個用來獲取 User-Agent 的中間件，并在此加載。

loading: Nuxt.js 提供了一套頁面內加載進度指示組件，可以在此配置顏色，禁用，或是配置自定義的加載組件。

env: 可以在此配置用來在服務端和客戶端共享的全局變量。

目錄即路由

Nuxt.js 在 vue-router 之上定義了一套自動化的生成規則，即依據 pages 的目錄結構生成。例如，我們有以下目錄結構：

這個目錄下含有一個基礎路由（無參數）以及兩個動態路由（帶參數），Nuxt.js 會生成如下的路由配置表（可以在 .nuxt 目錄下的 router.js 文件中找到）：

routes: [
  {
    path: "/",
    component: _abe13a78,
    name: "index"
  },
  {
    path: "/article/:id?",
    component: _48f202f2,
    name: "article-id"
  },
  {
    path: "/:page",
    component: _5ccbb43a,
    name: "page"
  }
]

對于 article-id 這個路由，路徑中帶有 :id? 參數，表明這是一個可選的路由，如果要將其設為必選，則必須在 article 的目錄下添加 index.vue 文件。

再看下面一個例子:

由于有同名文件和文件夾的存在，Nuxt.js 會為我們生成嵌套路由，生成的路由結構如下，在使用時，需要增加 <nuxt-child /> 標簽來顯示子視圖的內容。

routes: [
  {
    path: "/article",
    component: _f930b330,
    children: [
      {
        path: "",
        component: _1430822a,
        name: "article"
      },
      {
        path: ":id",
        component: _339e8013,
        name: "article-id"
      }
    ]
  }
]

此外，Nuxt.js 還可以設置動態嵌套路由，具體可參見Nuxt.js 的官方文檔。

以上是“Nuxt中Vue.js服務端渲染的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！