Nuxt.js服務端渲染實踐，從開發到部署

weij 發布于2019-08-21 17:54 / 3484人閱讀

摘要：感悟經過幾個周六周日的嘗試，終于解決了服務端渲染中的常見問題，當不在是問題的時候，或許才是我們搞前端的真正的春天，其中也遇到了一些小坑，官方還是很給力的，提后很積極的給予幫助，再次感謝的開發團隊。

感悟

經過幾個周六周日的嘗試，終于解決了服務端渲染中的常見問題，當SEO不在是問題的時候，或許才是我們搞前端的真正的春天，其中也遇到了一些小坑，Nuxt.js官方還是很給力的，提issue后很積極的給予幫助，再次感謝Nuxt.js的開發團隊。

項目地址
演示地址

路由鑒權

第一個攔路虎就是登陸時候的鑒權問題，如何把token保存到本地。官方使用express-session解決這個問題，但是這樣做后端也需要使用nodejs,而我們公司使用的PHP。轉念一想或許cookie可以一試，于是我是這樣做的：

app.post("/api/login", function (req, res) {
  // 后臺驗證用戶信息，并返回token
  async function login () {
    const { data } = await axiosServer.post("/login", req.body)
    return data
  }

  login().then(function (data) {
    // 把token存儲到cookie中
    const { token } = data
    if (token) {
      res.cookie("token", token, {
        maxAge: 60000 * 60 * 24
      })
    }
    // 原封不動返回
    return res.json(data)
  })
})

我把登錄請求用nodejs做了一次轉發，把用戶提交的數據傳給后端，后端返回的token設置到cookie里，然后把數據返會給前端，前端再用vuex保存token狀態，這樣token同時存在于cookie和內存里，刷新頁面也是正常的
前端存儲token:

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {
    if (req.cookies && req.cookies.token) {
      // 存儲token
      commit("SET_USER", req.cookies.token)
    }
  },
  // SET_USER
  SET_USER (state, token) {
    state.token = token
  },

于是這個問題就這樣解決了，所有需要存儲到本地的數據都可以這樣做來解決

渲染組件內的數據

另一個小問題是components里數據如何渲染。在Nuxt.js中只有page里的組件有fetch和asyncData方法，所以當我們使用layout布局頁面時如果組件需要請求數據，就無法渲染了，解決方法是在nuxtServerInit方法里初始化組件內的數據，如下：

  async nuxtServerInit ({ dispatch, commit }, { req, res }) {
    // 初始化組件內的數據
    await dispatch("ADMIN_INFO")
    await dispatch("TAGS")
    await dispatch("ARCHIVES")
  }

這樣組件內的數據也可渲染成功了

過濾器的使用

Nuxt.js的plugins設計的個人感覺還是很人性化的，用起來簡直是不能再簡單。在plugins新建一個filters.js，過濾器可以這樣玩：

import Vue from "vue"
// 時間格式化
export function formatDate (date, fmt) {
  let newDate = new Date(date)
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + "").substr(4 - RegExp.$1.length))
  }
  let o = {
    "M+": newDate.getMonth() + 1,
    "d+": newDate.getDate(),
    "h+": newDate.getHours(),
    "m+": newDate.getMinutes(),
    "s+": newDate.getSeconds()
  }
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + ""
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}
let filters = {
  formatDate
}

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})
export default filters

然后在nuxt.config.js中注冊一下：

  plugins: [
    "~plugins/filters.js"
  ]

在組件中就可以這樣happy的用起來了：



 {{date | formatDate("yyyy-MM-dd")}}

中間件

比如說用戶未登錄狀態下，通過路由闖入了需要鑒權的頁面，我們可以自定義一些錯誤：

// auth.js
export default function ({ store, error }) {
// 可通過組件的props接收error信息
  if (!store.state.token) {
    error({
      message: "cookie失效或未登錄，請登錄后操作",
      statusCode: 403
    })
  }
}

在組件中使用該中間件：

export default {
  middleware: "auth",
  // 還可以把用戶重定位到登錄頁
  fetch ({redirect, store}) {
    if (!store.state.token) {
      redirect("/login")
    }
  },
}

多級路由嵌套

官方說這種情況用的較少，但是我發現用的挺多的，比如說不同分類又有不同分頁，這樣分類和分頁都要是動態路由，如圖所示：

編譯后的結果：

項目部署

大概在8月份時候，寫了幾篇關于如何部署nodejs項目的文章，回頭看寫的果然比較菜，隨著時間推移，修復了一些錯誤，發現了一些錯誤，整體寫的太亂。于是抽了一天時間，在新的服務器上一邊實踐一邊記錄，把上面幾篇文章用gitbook匯總了一下，不在這里展開了，太長了，增加了自動部署的相關內容

結語

以上所有的實踐代碼都在這里，這個小項目是我在幾月前寫的，后來用Nuxt.js進行了重構！

GPU云服務器云服務器后端代碼部署到騰訊云服務器 nuxt.js java開發的網站如何部署到服務器上服務端渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90193.html

使用Docker部署Spring-Boot+Vue博客系統

摘要：先來看一下容器的文件中間一些操作省略這里用了多階段構建容器，如果直接通過設置環境變量只會在后面一個階段生效，但是是在第一個階段執行的，所以環境變量不能應用到當中。在今年年初的時候，完成了自己的個Fame博客系統的實現，當時也做了一篇博文Spring-boot+Vue = Fame 寫blog的一次小結作為記錄和介紹。從完成實現到現在，也斷斷續續的根據實際的使用情況進行更新。只不過每...

Eirunye 2019-06-28 16:40 評論0 收藏0
vue 服務器端渲染 nuxt.js初探

摘要：在調研插件后，發現無法滿足以及等要求時，果斷選用了做服務器渲染。布局目錄該目錄名為保留的，不可更改。服務器啟動的時候，該目錄下的文件會映射至應用的根路徑下。它可以在服務端或路由更新之前被調用。可用于指定服務端返回的請求狀態碼。開頭還是來一段廢話：年關將近，給大家拜個早年，愿大家年會都能抽大獎，來年行大運。廢話不多說，直接進正文項目環境：前端vue項目，需要將新增的幾個路由頁...

bingchen 2019-08-23 14:53 評論0 收藏0
珠峰前端架構師培養計劃

摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發實踐經驗相關字眼。我們主要從端公眾號移動端小程序三大平臺進行前端的技術選型，并來說說選其技術的幾大優勢。技術的優勢互聯網前端大潮后，前端出現了大框架，分別是與。 1、技術選型的背景前端技術發展日新月異，互聯網上出現的新型框架也比較多，如何讓新招聘的人員...

ccj659 2021-11-22 15:24 評論0 收藏0
細說 Vue 組件的服務器端渲染

摘要：所以，這次就來聊聊組件的服務器端渲染。這種模式下，后端只提供接口，傳統的服務器端路由模板渲染則都有層接管。這樣，前端開發人員可以自由的決定哪些組件需要在服務器端渲染，哪些組件可以放在客戶端渲染，前后端完全解耦，但又保留了服務器端渲染的功能。細說 Vue 組件的服務器端渲染聲明：需要讀者對 NodeJs、Vue 服務器端渲染有一定的了解現在，前后端分離與客戶端渲染已經成為前端開發的...

reclay 2019-08-23 17:51 評論0 收藏0