Vue SSR框架Nuxt使用小记


最近一个老的项目需要重构,接触到VueSSR框架Nuxt,用法和vue有些相同,但是又有个别情况下不相同,项目结束后对此进行一个记录,通过几个点来记录我在开发中遇到的一些问题进行总结.

1. 搭建运行

  • 基础搭建

基础搭建可以直接使用nuxt官方的脚手架生成,选择适合自己项目的一些配置集成.

npx or yarn create-nuxt-app <项目名>

  • 目录

Nuxt的目录基本和vue目录差别不大,不过Nuxt的路由是通过pages目录自动生成的,如果需要修改默认生成的路由需要在nuxt.config.js中的router配置中修改.

我们的重构项目因为url需要适配之前的url,所以我们所有的路由规则基本上都是动态的比如要访问xxx/动态参数/动态参数/动态参数.html需要将path设置成/xxx/:param1/:param2/:param3.html这样.

当然如果没有这么复杂的参数,可以直接将vue文件设置成_xx.vue,这样会自动生成xxx/动态参数path.

  • 插件使用

nuxt插件需要在nuxt.config.js中注入,plugins中写入插件路径,并且通过挂载到Vue原型上.

  • layouts

layouts的使用方法和App.vue类似,比如多个页面使用同一个头部底部等等的,可以在layout添加layouts文件夹中的vue组件name,并且在内容区域使用<Nuxt>标签作为路由出口.

2. 生命周期

nuxt生命周期分为服务端生命周期和客户端生命周期,可以使用一张图流程图来细化理解.

注意,只有在上面绿色的生命周期中才能使用window,其它生命周期使用window都会报错.

3. seo

使用nuxt当然是为了更好的seo啦,在nuxt中设置seo的几个重要参数keywords、都在head函数中,包括一些需要在当前页引入的css文件或者js文件

head(){
  return {
    title:'',
    meta:[{
            hid: 'description',
            name: 'description',
            content: ''
          },
          {
            hid: 'keywords',
            name: 'keywords',
            content: ''
          },
     ],
script:[{src:'',type:''}],
link:[{rel:'',href:''}]
  }
}

当然这里也可以动态设置,在asyncData请求中获取到的数据赋值到这里即可.

4. 注意事项

  • 公共js、css等
    公共的cssjs还有seo标签可以在nuxt.config.js中的head中定义,如果页面没有定义head,会使用这里的seo标签信息和加载这里的cssjs文件.
  • vuex

一般的登录信息我们使用vue的时候会放在cookie或者LocalStorage中,每次获取通过vuex来获取,在axios中请求的时候放在header请求头中,但是Nuxt能不能这样做呢?答案是不能,因为服务端生命周期中访问不到window,那就是说我们无法读取到cookie或者LocalStorage中的 数据了. 怎么解决这个问题?我们使用了一个cookie插件cookie-universal-nuxt. 首先安装cookie-universal-nuxt

npm i cookie-universal-nuxt -S

将插件添加到nuxt.config.js中的modules

modules: [
  'cookie-universal-nuxt',
]

然后就可以在服务端的生命周期钩子中使用cookie了.

context.$cookies.set('token')
context.$cookies.get('token')
context.$cookies.remove('token')

5. 遇到的问题

  • 组件生成多次

遇到一个性能问题,Nuxt在某种情况下会生成两个</Nuxt>组件,导致出现多个页面html,但是这个问题不会导致页面出现问题,只是在Vue devtools插件中发现的,github上提出了issuse,暂时未解决.

更新,新版本已经解决了该问题.

  • Axios的使用
    正常情况下,我们会将每个模块的api分成不同的api文件,方便维护,但是在Nuxt中我们怎样才能这样做呢?因为我们在独立的api/xxx.js文件中访问不到全局的$axios插件. 这里我给出的解决方法是,在请求接口的时候通过context$axios当做参数传递.
/**
 * @description: 请求时调用的参数
 * @param { this } context vue实例
 * @param { xxx } data 请求需要的参数
 * @return {*}
 */
export function xxxxx(context,data){
    // const { phone, action, yzm_ticket, yzm_ticket }=data
    return context.$axios.post(`你的接口url`,{...data})
}
async asyncData (content){
 //请求接口,将vue实例和请求参数传递
 xxxxx(content,data)
}

然后就可以继续按模块分类接口了.

  • BUS的使用

在我们的业务场景中,需要在多个页面调用到layouts组件的函数,vuex明显不合适,所以我使用了Bus来解决这个问题. nuxt中使用Busvue的区别不大,基本都是使用on()监听,emit触发事件即可. 首先我们需要在plugins中新建一个js文件,并且将$bus添加到vue的原型上,最后创建监听触发关闭三个事件.

import Vue from "vue";
const bus = new Vue();
Vue.prototype.$bus = {
  on(...event) {
    bus.$on(...event);
  },
  off(...event) {
    bus.$off(...event);
  },
  emit(...event) {
    bus.$emit(...event);
  }
}

当然最后别忘了在nuxt.config.js中添加插件,plugins:['~/plugins/bus']

6. 有哪些缺陷

  • 启动时间过长

因为这次重构的项目东西比较多,大概在我们重构第二个模块的时候,启动速度慢了下来,最后所有模块重构的差不多的时候,每次启动都需要花费非常多的时候.

  • 开发体验

和启动时间一样,模块多起来的时候,每次修改热更新都需要花费非常多的时间,基本上每次保存代码热更新的时候都可以喝上好几口水了,这个给我们的开发体验是非常差的.

  • 错误页面

Nuxt的报错会导致整个页面不可访问,比如有一个变量报了一个错误,会让整个页面无法渲染完成,导致页面出错.

7. 总结

  • 什么样的框架

Nuxt确实是一款非常不错的SSR框架,如果是熟悉Vue的人用来开发基本上可以一边看文档一边上手写代码,seo优化非常的友好的,性能上也比传统的前后端不分离的要好很多,我们重构后的项目性能提升非常之大.

  • 适合什么场景下使用

我个人觉得这个框架适合一些页面模块不是非常多的项目使用,因为页面模块多起来的话,开发体验会非常的不友好,比我前面提到的启动卡顿,开发也非常的卡顿.

  • 建议

国内使用这个框架的确实很多,但是在开发途中会遇到一些问题找不到,建议多上Github去了解一下,看看别人提出的问题有没有类似的,这样可以减少很多搜索问题的时间,也可以快速的解决问题,并且开发人员回馈速度也是很快的.

声明:Web前端小站 - 前端博客 - 南岸有归的个人博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue SSR框架Nuxt使用小记


行路有良友,便是捷径。带上我吧,一起去看更大的世界。