nuxt项目中遇到的坑

  1. 环境变量
    想设置某个环境变量在服务端和客户端都能获取,不能光只在package.json的脚本中使用cross-env进行设置,还需要在nuxt.config.js的env中进行添加
    在这里插入图片描述

  2. 嵌套路由会进入两次plugin中的js
    在这里插入图片描述
    第一次为首页刷新是打印一个111
    后两次为在嵌套页面刷新时所打出的两个1111

  3. iconfont和自定义的svg图标的嵌套路由页面刷新不显示
    在这里插入图片描述
    在新闻嵌套页面刷新后icon不出现
    在这里插入图片描述
    在首页刷新后可以出现

且不出现的情况对于自定义的svg图片会一直不出现,而引入的iconfont.js文件会在再次进入首页后出现

  1. 出现服务端和客服端渲染不一致的报错
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. 
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. 
Bailing hydration and performing full client-side render.

出现这个说明服务端渲染的dom和客户端(浏览器端)渲染的dom不一致

  • 看看是不是有些组件在服务端未渲染
  • 尤其注意某些使用了window对象的组件
  • 在nuxt.config.js中的plugins对象中添加ssr:false属性

这个问题不处理打包时并不会报错,但是对于打包后的页面在服务端未渲染那么也不会出现在客户端了,所以这些报错必须解决

  1. store中可以使用this,但是this为context上下文,属于服务端,不是vue.prototype
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值