Nuxt.js服务端渲染实践，从开发到部署

weij 发布于2019-08-21 17:54 / 3568人阅读

摘要：感悟经过几个周六周日的尝试，终于解决了服务端渲染中的常见问题，当不在是问题的时候，或许才是我们搞前端的真正的春天，其中也遇到了一些小坑，官方还是很给力的，提后很积极的给予帮助，再次感谢的开发团队。

感悟

经过几个周六周日的尝试，终于解决了服务端渲染中的常见问题，当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开发的网站如何部署到服务器上服务端渲染

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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