這篇文章主要為大家展示了“Nuxt中Vue.js服務端渲染的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Nuxt中Vue.js服務端渲染的示例分析”這篇文章吧。
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設,汝南企業(yè)網(wǎng)站建設,汝南品牌網(wǎng)站建設,網(wǎng)站定制,汝南網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,汝南網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。服務端渲染
服務端渲染（Server Side Render）并不是一個新的概念，在單頁應用（SPA）還沒有流行起來的時候，頁面就是通過服務端渲染好，并傳遞給瀏覽器的。當用戶需要訪問新的頁面時，需要再次請求服務器，返回新的頁面。
為了優(yōu)化體驗，開發(fā)者們開始選擇采用 JavaScript 在前端完成渲染過程，用前后端分離的手段，使后端更專注于數(shù)據(jù)，而前端注重于處理展示，通過設計良好的 API 以及 Ajax 技術(shù)完成前后端的交互，jQuery、React.js、Vue.js、Angular.js 等框架應運而生。
這些框架給開發(fā)者帶來了巨大的便利，但是對于一些論壇、資訊網(wǎng)站、或是企業(yè)的官方網(wǎng)站來說，他們對 搜索引擎優(yōu)化（SEO） 有強烈的要求，而前端渲染技術(shù)是無法滿足他們的需求的。如果無法通過搜索引擎的搜索輸出自身的內(nèi)容，那么網(wǎng)站的價值就會大大受影響，要解決這類問題，還是要靠服務端渲染。
本文會介紹 Vue.js 的服務端渲染解決方案 Nuxt.js。Vue.js 推出后，其數(shù)據(jù)驅(qū)動和組件化思想，以及簡潔易上手的特性給開發(fā)者帶來了巨大的便利，Vue.js 官方提供的 vue-server-renderer 可以用來進行服務端渲染的工作，但是需要增加額外的工作量，開發(fā)體驗仍有待提高，而 Nuxt.js 推出后，這個問題被很好的解決了。
Nuxt.js 簡介
Nuxt.js 是一個基于 Vue.js 的通用應用框架，Nuxt.js 預設了利用 Vue.js 開發(fā)服務端渲染的應用所需要的各種配置，并且可以一鍵生成靜態(tài)站點。同時，Nuxt.js 的熱加載機制可以使開發(fā)者非常便捷的進行網(wǎng)站的開發(fā)。
Nuxt.js 于 2016 年 10 月 25 號發(fā)布，上線還不足一年，但是已經(jīng)受到了廣泛的好評，最新的穩(wěn)定版本是 0.10.7，目前仍在進行 1.0 版本的內(nèi)測，Nuxt.js 社區(qū)也在逐步完善中，官網(wǎng)已經(jīng)支持了中文文檔。
簡單上手
Vue.js 的 vue-cli 工具可以很方便的讓我們使用現(xiàn)成的模板初始化 Vue.js 項目，而 Nuxt.js 團隊已經(jīng)為我們提供了初始化 Nuxt.js 項目的模板，安裝 vue-cli 后，只需在命令行中輸入
vue init nuxt/starter
即可完成項目的創(chuàng)建工作，然后進入項目目錄中執(zhí)行以下命令:
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/ ：用于存放靜態(tài)資源，該目錄下的資源使用 Webpack 構(gòu)建。
components/ ：存放項目中的各種組件。注意，只有在這個目錄下的文件才能被稱為 組件 。
layouts/ ：創(chuàng)建自定義的頁面布局，可以在這個目錄下創(chuàng)建全局頁面的統(tǒng)一布局，或是錯誤頁布局。如果需要在布局中渲染 pages 目錄中的路由頁面，需要在布局文件中加上
middleware/ ：放置自定義的中間件，會在加載組件之前調(diào)用。
pages/ ：在這個目錄下，Nuxt.js 會根據(jù)目錄的結(jié)構(gòu)生成 vue-router 路由，詳見下文。
plugins/ ：可以在這個目錄中放置自定義插件，在根 Vue 對象實例化之前運行。例如，可以將項目中的埋點邏輯封裝成一個插件，放置在這個目錄中，并在 nuxt.config.js 中加載。
static/ ：不使用 Webpack 構(gòu)建的靜態(tài)資源，會映射到根路徑下，如 robots.txt
store/ ：存放 Vuex 狀態(tài)樹。
nuxt.config.js ：Nuxt.js 的配置文件，詳見下文。
Nuxt.js 的渲染流程
Nuxt.js 通過一系列構(gòu)建于 Vue.js 之上的方法進行服務端渲染，具體流程如下:
調(diào)用 nuxtServerInit 方法
當請求打入時，最先調(diào)用的即是 nuxtServerInit 方法，可以通過這個方法預先將服務器的數(shù)據(jù)保存，如已登錄的用戶信息等。另外，這個方法中也可以執(zhí)行異步操作，并等待數(shù)據(jù)解析后返回。
Middleware 層
經(jīng)過第一步后，請求會進入 Middleware 層，在該層中有三步操作：
讀取 nuxt.config.js 中全局 middleware 字段的配置，并調(diào)用相應的中間件方法 匹配并加載與請求相對應的 layout 調(diào)用 layout 和 page 的中間件方法
調(diào)用 validate 方法
在這一步可以對請求參數(shù)進行校驗，或是對第一步中服務器下發(fā)的數(shù)據(jù)進行校驗，如果校驗失敗，將拋出 404 頁面。
調(diào)用 fetch 及 asyncData 方法
這兩個方法都會在組件加載之前被調(diào)用，它們的職責各有不同， asyncData 用來異步的進行組件數(shù)據(jù)的初始化工作，而 fetch 方法偏重于異步獲取數(shù)據(jù)后修改 Vuex 中的狀態(tài)。
我們在 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 方法調(diào)用完畢后進行調(diào)用，可以看到，組件從 asyncData 方法中獲取的數(shù)據(jù)會和組件原生的 data 方法獲取的數(shù)據(jù)做一次合并，最終仍然會在 data 方法中返回，所以得出， asyncData 方法其實是原生 data 方法的擴展。
經(jīng)過以上四步后，接下來就是渲染組件的工作了，整個過程可以用下圖表示：
（圖片來源：Nuxt.js 官網(wǎng)）
如上文所述，在 .nuxt 目錄下，你可以找到 server.js 文件，這個文件封裝了 Nuxt.js 在服務端渲染的邏輯，包括一個完整的 Promise 對象的鏈式調(diào)用，從而完成上面描述的整個服務端渲染的步驟。
Nuxt.js 的一些使用技巧
nuxt.config.js 的配置
nuxt.config.js 是 Nuxt.js 的配置文件，可以通過針對一系列參數(shù)的設置來完成 Nuxt.js 項目的配置，可以在Nuxt.js 官網(wǎng) 找到針對這個文件的說明，下面舉例一些常用的配置：
head: 可以在這個配置項中配置全局的 head ，如定義網(wǎng)站的標題、 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 項目的構(gòu)建規(guī)則，即 Webpack 的構(gòu)建配置，如通過 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: 可以在此配置路由的基本規(guī)則，以及進行中間件的配置。例如，你可以創(chuàng)建一個用來獲取 User-Agent 的中間件，并在此加載。
loading: Nuxt.js 提供了一套頁面內(nèi)加載進度指示組件，可以在此配置顏色，禁用，或是配置自定義的加載組件。
env: 可以在此配置用來在服務端和客戶端共享的全局變量。
目錄即路由
Nuxt.js 在 vue-router 之上定義了一套自動化的生成規(guī)則，即依據(jù) pages 的目錄結(jié)構(gòu)生成。例如，我們有以下目錄結(jié)構(gòu)：
這個目錄下含有一個基礎路由（無參數(shù)）以及兩個動態(tài)路由（帶參數(shù)），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? 參數(shù)，表明這是一個可選的路由，如果要將其設為必選，則必須在 article 的目錄下添加 index.vue 文件。
再看下面一個例子:
由于有同名文件和文件夾的存在，Nuxt.js 會為我們生成嵌套路由，生成的路由結(jié)構(gòu)如下，在使用時，需要增加
routes: [
{
path: "/article",
component: _f930b330,
children: [
{
path: "",
component: _1430822a,
name: "article"
},
{
path: ":id",
component: _339e8013,
name: "article-id"
}
]
}
]此外，Nuxt.js 還可以設置動態(tài)嵌套路由，具體可參見Nuxt.js 的官方文檔。
以上是“Nuxt中Vue.js服務端渲染的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
