nuxt.js框架踩坑指南

Nuxt

官方文档

简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO

生命周期

众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在:

生命周期流程图，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端

遇到的问题

一、从上面的生命周期可以看出来created会在服务端和客户端执行，因为服务端是没有window、localStorage、sessionStorage、cookie，所以created如果要使用这些对象的话需要先判断在客户端环境下再执行。

二、在created里执行代码又会衍生出另一个问题，如果在created里写了只在客户端执行的代码，这部分代码的效果修改了dom树的话会报错：服务端和客户端dom树不一致。这种情况把代码写到mounted下面就行。

三、nuxt项目是自带vuex的，直接写到store文件夹下就行。但是每次刷新的时候state中的值又会设成默认的，所以就用到了nuxtServerInit，每次设置state的时候把值也存到cookie中，在nuxtServerInit下再把cookie中的值赋给state，这样就可以正常使用store了。

四、可以通过中间件来判断用户是否登录，没登录跳转到登录页

五、asyncData函数优化

该函数中请求api接口数超过1个，多的甚至达到10,20多个，这种情况我们不能使用async await，请求完一个再接着请求下一个(同步请求接口)；如果有10个接口需要请求，每个接口平均响应1s，那么至少需要10s才会响应html页面；如果使用Promise.all异步请求10个接口，那么最快接近1s响应html页面； asyncData函数会在服务端执行代码，因此一定要做好容错处理；另外如果该函数代码一直未执行完，那么页面首次响应将会被挂起，一直处于加载中 对于页面首次加载，该函数执行耗时越短，页面响应时间就越短(页面加载越快)

此外在asyncData中顺序执行的接口除了用await同步请求以外，还可以用下面这种写法

六、sessionStorage和localStorage的区别

由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。Web Storage具体又分两种：

1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

七、借助 head 属性，Nuxt.js 让你可以在 nuxt.config.js 中配置应用的 meta 信息。

之后只需要在每个页面配置独有的title属性就行了，title会替换模板中的”%s”