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>

参考

  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 对象未定义

            </div>
目录
相关文章
|
6月前
|
网络安全 计算机视觉
【node】 npm install 报错:code 128
【node】 npm install 报错:code 128
187 1
|
6月前
|
小程序 前端开发 JavaScript
node使用nodemailer在本地可以正常发送邮件,放服务器后无法发送报错
node使用nodemailer在本地可以正常发送邮件,放服务器后无法发送报错
104 0
|
6月前
|
SQL 消息中间件 存储
Flink报错问题之Flink报错:Table sink 'a' doesn't support consuming update and delete changes which is produced by node如何解决
Flink报错通常是指在使用Apache Flink进行实时数据处理时遇到的错误和异常情况;本合集致力于收集Flink运行中的报错信息和解决策略,以便开发者及时排查和修复问题,优化Flink作业的稳定性。
|
6月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
400 0
|
1月前
|
JavaScript 开发工具 git
已安装nodejs但是安装hexo报错
已安装nodejs但是安装hexo报错
21 2
|
6月前
|
资源调度 jenkins 持续交付
jenkins 自动安装nodejs16.16.0版本报错处理
jenkins 自动安装nodejs16.16.0版本报错处理
748 0
|
6月前
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
4月前
|
移动开发 运维 JavaScript
阿里云云效操作报错合集之遇到Node.js的内存溢出问题,该怎么办
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
4月前
|
JavaScript Shell 应用服务中间件
阿里云云效操作报错合集之Node.js构建报错,该如何排查问题
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
4月前
|
资源调度 前端开发 开发工具
阿里云云效操作报错合集之Node-Sass模块在构建过程中,出现报错"ENOENT: no such file or directory, scandir ",该如何处理
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。