这一篇，主要用来整理实战中遇到的一些问题
一、微信缓存
默认打包后的js文件是没有加hash值的，所以在微信中就会存在缓存问题，所以我们需要在nuxt.config.js中进行设置
image.png
二、长数字字符串存cookie四舍五入
笔者公司用户id是18位，使用了cookie-universal-nuxt插件将其存在浏览器中，存的时候是以字符串的方式存的，但是取的时候故事就发生了，接口返回数据经常错乱，冷静下来定睛一看，是取cookie的时候将返回的用户id转成了数字，从而四舍五入了，最后解决方式就是将用户id拼接了一个字符串，然后取的时候再将其去掉。
image.png
三、nuxt-link的返回问题
正常情况下，nuxt-link是被渲染成a标签进行跳转的，所以当nuxt-link中嵌套了a标签，点击浏览器返回按钮时，v-for渲染的数据就会重复，当把nuxt-link 变成target:div 时，可点击区域又变成了嵌套内的a标签，所以最后解决方式就是，将nuxt-link里嵌套的a标签，替换成其他标签。
这个就是常见的a标签不能嵌套a标签
image.png
四、client与server渲染不一致
常见报错信息
image.png
有时会出现这种报错信息，在我开发时，发生这样的原因有两种
1、页面组件中template标签中存在注释
2、标签嵌套不标准，比如a标签嵌套a标签
五、服务端无window，document
所以在中间件和asyncData等服务端方法中，是不可以使用window，document里面的方法和属性的，所以就会造成很多的障碍，这也是我为什么使用cookie-universal-nuxt来存取cookie造成了四舍五入的情况。
六、这个不属于nuxt的问题，属于忽略的基础常识问题，该打脸
我将一个布尔属性值存到cookie中，取的时候转成了字符串，所以我再用Boolean()将其转成布尔值的时候就会发生问题，返回永远都是true
就像这样
console.log(Boolean('false')) // true
七、规范写代码
因为vue帮我们做了很多兼容，所以在使用vue的过程中，养成了很多坏习惯，这些在nuxt都会产生不可预想的错误。
比如对象多级取属性，v-if一定要判断彻底，逐级判断.
取数组dada[0]前，一定要先判断data存在且data.length
反正都是细节中容易忽略的问题。
代码书写规范，就会避免很多不必要的错误。
image.png
八、错误捕获
因为有些请求是放在服务端请求的，所以在浏览器刷新的时候，是看不到ajax请求的，所以这种请求错误是很难被捕捉的， 我的方法比较笨，就是看服务端日志。
看看哪位实战过nuxt的同胞，有没有再浏览器中可以方便捕获服务端请求问题的方便的调试方法，跪求。
网友评论