Vue 基於 NUXT 的 SSR

時間 2019-11-05

標籤 vue 基於 nuxt ssr 简体版

原文原文鏈接

SSR

首先說下 SSR，最近很熱的詞，意爲 Server Side Rendering（服務端渲染），目的是爲了解決單頁面應用的 SEO 的問題，對於通常網站影響不大，可是對於論壇類，內容類網站來講是致命的，搜索引擎沒法抓取頁面相關內容，也就是用戶搜不到此網站的相關信息。javascript

抓取頁面的前提是 html 含有被抓取內容，咱們不妨看看基於 vue 的線上 SPA 頁面請求時返回了什麼css

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

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

另外 SSR 還適用如下場景java

客戶端的網絡比較慢node
客戶端運行在老的或者直接沒有 JavaScript 引擎上webpack

vue 官網給出了 SSR 原理圖片ios

對於這幅圖的原理官網有詳細解釋，此類文章也不少，這裏不贅述。git

NUXT

咱們進入正題說下 NUXTgithub

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

做用就是在 node.js 上進一步封裝，而後省去咱們搭建服務端環境的步驟，只須要遵循這個庫的一些規則就能輕鬆實現 SSR

安裝流程

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

npm install -g vue-cli

完成後在須要建立的目錄下執行如下

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

依賴安裝完成後

npm run dev

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

說明：Nuxt.js 會監聽 pages 目錄下的改變，添加新 page 的時候不須要重啓服務

目錄結構

完成上面命令後你的目錄結構會以下

Nuxt.js 給出了最簡單的目錄結構

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

也就是說，至少須要一個 page 來做爲展現頁。

文件的路徑建議都採用絕對路徑，表格以下

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

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

路由

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

例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 目錄，除非特殊需求

默認的給力咱們三個配置 ·head·css·loading· 分別是頭部設置，全局css，loading進度條

nuxt.config.js 的所有的配置以下,點擊查看具體例子

另外還提供了 vuex 等配置，感興趣能夠去 github 和官網。

NUXT 能爲咱們作什麼

對於使用就說上面這麼多（官網上都有，這裏給你們一個概覽），說下爲何選擇 NUXT 來作 SSR

問題1：就是咱們無需爲了路由劃分而煩惱，你只須要按照對應的文件夾層級建立 .vue 文件就行
問題2：無需考慮數據傳輸問題，nuxt 會在模板輸出以前異步請求數據（須要引入 axios 庫），並且對 vuex 有進一步的封裝
問題3：內置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據配置打包對應的文件

還有不少便捷之處，能夠嘗試去寫一寫，讀讀源碼