Nuxt.js打包后报错DOMException: Failed to execute appendChild on Node

本文探讨了Nuxt.js在打包后出现的DOMException错误,提供了两种解决策略:一是使用<client-only>或<no-ssr>组件确保仅在客户端渲染;二是通过process.client和process.server条件判断在脚本中区分客户端和服务端逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

报错问题

Nuxt.js打包后报错

DOMException: Failed to execute 'appendChild' on 'Node': 
This node type does not support this method.

开发环境下报错

Mismatching childNodes vs. VNodes:

解决

1、template中可以限制只在客户端渲染

// version >= 2.9.0
<client-only></client-only>

// version < 2.9.0
<no-ssr></no-ssr>

参考

  1. Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.
  2. https://nuxtjs.org/api/components-client-only/

2、script中可以使用客户端、服务端判断

if(process.client){
    console.log('client')
}

if(process.server){
    console.log('server')
}

参考
Window 或 Document 对象未定义

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值