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

感悟

经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,也成功说服了公司新项目采用前后端分离的解决方案,当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里的组件有fetchasyncData方法,所以当我们使用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的用起来了:

<!-- 时间格式化 -->
<div>
 <span>{{date | formatDate(‘yyyy-MM-dd‘)}}</span>
</div>

还有很过好玩的就不说了,文章太长了估计都不想看了

项目部署

大概在8月份时候,写了几篇关于如何部署nodejs项目的文章:

nodejs服务器部署教程一

nodejs服务器部署教程二,把vue项目部署到线上

nodejs服务器部署教程三,部署基于node+vue+mongodb的项目

nodejs服务器部署教程四,部署ssl证书,升级为https

随着时间推移,修复了一些错误,发现了一些错误,整体写的太乱。于是抽了一天时间,在新的服务器上一边实践一边记录,把上面几篇文章用gitbook汇总了一下

结语

不放个demo就走显得就不厚道了,基于Nuxt.js的开源项目确实不太多,以下是我耗时一个月业余时间做的小项目,之前是基于vuejs开发的,现在用Nuxt.js进行了重构,解决了服务端渲染的常见问题

GitHub

GitBook

时间: 2024-10-07 17:44:42

Nuxt.js服务端渲染实践,从开发到部署的相关文章

nuxt项目服务端渲染应用部署及使用pm2守护进程

服务端渲染应用部署应该先编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 我们已经在pakage.json里配置好script命令 { "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generat

nuxt.js 服务端部署

这次 nuxt.js 服务端部署以docker为基础部署,这样解决以下这些问题: 1.  服务器里一般不搭建运行环境,可以直接以docker里的为环境,统一部署,而不用再次搭建运行环境 2. 常常出现本地没问题,到了服务端上部署时一堆错误,本地和服务器统一用docker里的环境打包部署,解决npm install,npm build等部署出现的错误,方便快捷 一.开始部署 准备如下项目 nuxt为需要部署的nuxt.js项目,名称随意,但需要和yml文件里的对应 nuxt-compose.yml

nuxt之服务端渲染

Nuxt.js是基于Vue.js的通用应用框架,与vue.js很类似,下面我们一起看一下 nuxt简介 通过对客户端/服务端基础架构抽象组织,主要供应ui渲染 下图Nuxt.js应用一个完整服务器请求到渲染(用户用<nuxt-link>切换路由渲染页面)流程 安装与配置 安装 确保安装npx(npx默认在npm5.2版本以上安装) npx create-nuxt-app 项目名 && yarn create nuxt-app 项目名 还可以用另一种电脑安装vue-cli可以使用

基于vue的nuxt框架cnode社区服务端渲染

nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub地址 https://github.com/Kim09AI/nu... 技术栈 vue vue-router vuex nuxt axios simplemde ES6/7 stylus 目录结构 ├─npm-shrinkwrap.json ├─nuxt.config.js # nuxt配置文件 ├

Vue.js与 ASP.NET Core 服务端渲染功能整合

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gy?ngy?si 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用. 让我们一起来仔细研究一些服务端渲染的概念,权衡优缺点,然后遵循第一法则用 PHP 建立一个服务端渲染. 什么是服务端渲染 一个单页应用(通常也叫做 SPA

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║实战二:初探SSR服务端渲染(个人博客二)

缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大家增加点儿学习的动力,每天提醒下,完全没有提纲或者安排说明什么的,就是按照我自己学的方向走,正好发现了一个规律就是:每一个系列正好是 1 个引子 + 12 篇正文,不知道大家对这个有没有感觉,大家可能看到我的头像就知道了,哈哈,其实我是一个红迷,正好这里机缘巧合,两个系列都形成了这样的,我自私的给自

Nuxt.js开启SSR渲染

第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框