Nuxt 框架服务端渲染

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

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

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

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

<template>
       <nuxt-link to="/">首页</nuxt-link>
</template>
路由传参跳转（可参考vue的路由传参）
<template>
       <nuxt-link : to="{name: '/', params:{id:'1'}}">首页</nuxt-link>
</template>

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

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

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

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

// 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>

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

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

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

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

开始客户端渲染

beforeCreate();
created();

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

beforeMount();
mounted();

可方便爬虫爬到该网站的基本描述信息。在 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.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（反向代理）

感兴趣的可以自行查阅官方文档