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天前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
31 0
|
2月前
|
消息中间件 JavaScript 中间件
函数计算产品使用问题之WebIDE编写的Node.js代码是否会自动进行打包部署
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
7天前
|
JavaScript 前端开发 开发工具
五子棋小游戏(JS+Node+Websocket)可分房间对战
本文介绍了通过JS、Node和WebSocket实现的五子棋游戏,支持多人在线对战和观战功能。
20 1
五子棋小游戏(JS+Node+Websocket)可分房间对战
|
2月前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
2月前
|
缓存 JavaScript 前端开发
成功解决:npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】
这篇文章介绍了如何解决npm版本与Node.js版本不兼容的问题,提供了查看当前npm和Node.js版本的步骤,以及如何根据Node.js版本选择合适的npm版本并进行升级的详细指导。
成功解决:npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】
|
2月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件,提取所有的url
node.js实现遍历所有文件夹里面的js文件,提取所有的url
|
2月前
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
67 0
|
2月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
|
2月前
NPM——Electron failed to install correctly, please delete node_modules/electron and try
NPM——Electron failed to install correctly, please delete node_modules/electron and try
134 0
|
2月前
|
JavaScript
Vue——使用JS文件中的函数ESLint报错未定义
Vue——使用JS文件中的函数ESLint报错未定义
32 0