Nuxt框架服务端渲染

在开始今天的文章内容前，我们首先先要了解一下什么是Nuxt.js？

Nuxt.js是通用的VUE的一个SSR框架（服务器端渲染）。官方介绍是通过对客户端/服务端基础框架的抽象组织，Nuxt.js主要关注的应用的UI渲染。

那什么是SSR呢？

SSR是在服务器端把vue文件直接渲染成html返回给浏览器。SSR对SEO的支持非常好，以前用vue做的SPA（单页应用）对搜索引擎是不友好的，搜索引擎不好抓取单页应用；相对比SPA加载速度快，SSR是直接将html字符串传给浏览器。

Nuxt.js的特点

• 自动代码分层；
• 服务端渲染；
• 强大的路由功能，支持异步数据；
• 静态文件服务；
• ES6/ES7语法支持；
• 打包压缩js和css；
• HTML头部标签管理；
• 本地开发支持热加载；
• 集成ESLint；
• 支持各种样式处理器：SASS、LESS等等。

Nuxt.js路由传参跳转

在pages 的目录结构如下创建xxx.vue，Nuxt.js 会自动生成的路由配置，要在页面之间使用路由，使用<nuxt-link> 标签

路由跳转：

<template>
       <nuxt-link to="/">首页</nuxt-link>
</template>

路由传参跳转（可参考vue的路由传参）

<template>
       <nuxt-link : to="{name: '/', params:{id:'1'}}">首页</nuxt-link>
</template>

Nuxt.js生命周期

uxtServerlnit：

服务器初始化，以在这个生命周期中获取token，并存储（只会运行一次）。在store文件中创建index.js

export const actions = {
   nuxtServerlnit(store, context) {
      // 服务器初始化store
      console.log(store, context);
   }
}

moddleware：

中间件运行，类似于vue.js中的导航守卫，可以是全局的，路由的，组件的。可以在这个生命周期中进行用户是否登录判断；可全局nuxt.config.js进行配置、可在页面组件中配置（layout）、也可在布局组件中配置（page&children）

// nuxt.config.js中配置（全局配置）
module.exports = {
   router: {
     middleware: 'auth'
   }
}

// 在middleware文件中创建auth.js
export default ({store,route,redirect,params,query,req,res})=>{
     // 全局守卫
    console.log('middleware');
}

// 在布局层页面配置，在layouts文件中的default.vue
<script>
  export default {
    // middleware: ‘auth’  // 布局层中间件定义
    middleware(){
     console.log('middleware');
    } 
  }
</script>

// 在页面中配置。在pages文件中
<script>
  export default {
      // middleware: ‘auth’  // 页面层中间件定义
      middleware(){
  console.log('middleware');
     } 
  }
</script>

validate：

校验参数，用来做校验做url参数对不对的.主要是在页面中使用。

<script>
  export default {
       validate ({params,query}){
   console.log('validate')
    return true
     } 
   }
</script>

asyncData：

异步数据处理，限于页面组件(pages)中使用个，components中不能使用每次加载之前被调用。一般在这个函数中发送请求，读取服务端数据

fetch：

异步数据处理，可以在页面、组件中都能使用。读取服务端数据提交给vuex

render：

开始客户端渲染

服务端和客户端公用个的生命周期 (el还没有被渲染)：

beforeCreate()
created()

注：服务端不存在window，不要在服务端生命周期获取

客户端的生命周期：

beforeMount()
mounted()

meta信息注入

可方便爬虫爬到该网站的基本描述信息。在nuxt.config.js文件中配置:

module.exports = {
   head: {
  title: '网站统一标题',
  meta: [
     {charset:'utf-8'},
     {hid: 'description',name: 'description',content: '网站描述信息'}
     // meta标签的hid在每一个配置中保持一致
        ],
        link: [
    {rel: 'icon',type: 'image/x-icon',href: '/favicon.ico'}
        ]
   }
}

页面中自定义信息描述：

export default {
  head() {
    return {
  meta: []
    }
  },
}

Nuxt部署

在nuxt.config.js文件中配置：

module.exports = {
  server: {
     port: 3000  // 指定nutx端口，默认为3000
     host: '0.0.0.0'  // 指定主机地址（本地）
  }
}

npm run build 进行打包，我们需要复制到服务器的文件：.nuxt、package-lock.json、package.json、nuxt.config.js、static、server（反向代理）

感兴趣的可以自行查阅官方文档。Nuxtjs：https://nuxtjs.org/

作者：丁汤立 | 来源：FreeSWITCH中文社区