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

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

报错问题

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>

参考


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

https://nuxtjs.org/api/components-client-only/

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


if(process.client){
    console.log('client')
}
if(process.server){
    console.log('server')
}
相关文章
|
3月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
10月前
|
数据库
【YashanDB 知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
**问题现象**:在共享集群部署数据库时,遇到错误 YAS-05721,提示节点名称无效。原因是操作系统主机名不符合服务器名称要求(字母、数字、下划线组成,长度4-64字符,以字母开头)。**解决办法**:1. 部署时加--ignore-hostname 参数,由 yasboot 自动生成合法名称;2. 修改操作系统 hostname 符合要求。
|
9月前
|
数据库
【YashanDB知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
【YashanDB知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
394 1
|
8月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
792 9
|
10月前
|
数据库
【YashanDB 知识库】如何解决共享集群部署遇到报错:YAS-05721 invalid input parameter, reason: node name invalid.
在共享集群部署数据库时,遇到错误“YAS-05721 invalid input parameter, reason: node name invalid”。原因是操作系统的主机名不符合服务器名称要求(需由字母、数字、下划线组成,以字母开头,长度4-64字符)。解决办法:1. 部署时加--ignore-hostname参数,由yasboot生成合规名称;2. 修改操作系统hostname以符合要求。
|
12月前
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
825 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
12月前
Node安装版本低于工程版本时打包绕过校验
在开发中,若本地Node版本低于项目配置要求,导致打包报错(如图所示),可在不变更本地环境的情况下,通过在执行`npm run build`前输入命令`set NODE_OPTIONS=--openssl-legacy-provider`来绕行此问题,确保构建顺利进行。
743 10
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
228 9