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中文社区

版权声明:本文内容转自互联网,本文观点仅代表作者本人。本站仅提供信息存储空间服务,所有权归原作者所有。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至1393616908@qq.com 举报,一经查实,本站将立刻删除。

(0)

相关推荐

发表回复

登录后才能评论