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é)構(gòu)

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

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

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

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

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

例：怎么在 /pages/user/me.vue 引入一個 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

會生成

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é)

本篇主要介紹 nuxt 的便捷之處，在使用上目前不推薦使用，幾個原因：
文檔不完善還有許多是空的，不是說我們什么信息都得不到，可以看文檔的 examples，里面列舉的比較全面。

目前是 0.8.0 版本，而且 README 里介紹 1.0 即將到來，可能會添加新功能，文檔也會完善，待到版本穩(wěn)定后再部署也不遲。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue.prototype詳解及使用方式
這篇文章主要介紹了Vue.prototype詳解及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3中v-if和v-for優(yōu)先級實例詳解
Vue.js中使用最多的兩個指令就是v-if和v-for,下面這篇文章主要給大家介紹了關于Vue3中v-if和v-for優(yōu)先級的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
vue 如何開啟或關閉熱更新
這篇文章主要介紹了vue 如何開啟或關閉熱更新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+element實現(xiàn)手機號驗證碼注冊的示例
本文主要介紹了vue+element實現(xiàn)手機號驗證碼注冊的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
Vue3中當v-if和v-for同時使用時產(chǎn)生的問題和解決辦法
封裝一個組件時,我使用到了v-for和v-if,它們在同一標簽內(nèi),總是提示v-for循環(huán)出來的item在實例中沒有被定義,查詢資料后原因是因為v-for和v-if在同級使用時,v-if優(yōu)先級比v-for高,所以本文給大家介紹了Vue3中當v-if和v-for同時使用時產(chǎn)生的問題和解決辦法
2024-07-07
vue中響應式布局如何將字體大小改成自適應
這篇文章主要介紹了vue中響應式布局如何將字體大小改成自適應，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue keep-alive多層級路由支持問題分析
這篇文章主要介紹了vue keep-alive多層級路由支持,在文章開頭給大家介紹了keep-alive使用問題，解決使用keep-alive include屬性問題，本文給大家介紹的非常詳細，需要的朋友可以參考下
2023-03-03
window.onresize在vue中只能使用一次,自適應resize報錯問題
這篇文章主要介紹了window.onresize在vue中只能使用一次,自適應resize報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
解決vue 綁定對象內(nèi)點擊事件失效問題
今天小編就為大家分享一篇解決vue 綁定對象內(nèi)點擊事件失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue中進行數(shù)據(jù)緩存的使用示例
數(shù)據(jù)緩存可以提高應用程序的性能,減少網(wǎng)絡請求,提高用戶體驗,在本文中,我們介紹了Vue中如何進行數(shù)據(jù)緩存,并提供了一些示例代碼,具有一定的參考價值,感興趣的可以了解一下
2023-09-09