vue3 + vite 项目登录退出后页面白屏并报错

最新推荐文章于 2024-03-08 11:46:56 发布
最新推荐文章于 2024-03-08 11:46:56 发布
阅读量1.7k 收藏
点赞数
分类专栏： vue3.0 vite 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17686345/article/details/127961680
版权

  在项目登出进入登录页面后，页面会白屏并报错，报错信息如下

runtime-dom.esm-bundler.js:10 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

根据报错信息可以得知，是由于未找到目标节点，而导致插入节点失败

通过排查发现是如下代码导致

 

 可能是在返回到登录页面时，id为app的dom节点有变动，导致在teleport中的节点插入时，未能找到对应的节点，就导致页面渲染失败

解决办法：

在根节点增加一个专门用来插入teleport的容器节点，如下图所示

 

 

 

lT-_-T_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
前端Uncaught (in promise) 的解决方法及原因
热门推荐
weixin_48986139的博客
01-24 9万+
前端Uncaught (in promise) 的解决方法及原因
VUE登录后返回原页面空白
心随梦飞
05-06 1010
https://router.vuejs.org/zh/guide/essentials/history-mode.html
TS项目实战四：ts+vue3+elementplus实现登录注册功能
最新发布
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-08 1132
使用vue3+elementplus+vite+pinia实现用户登录、注册相关界面及对应业务流程的开发，对接express后端服务，调用对应接口，实现完整的用户登录注册功能。TS实战项目三十：Vue3项目创建TS实战项目三十：Vue3项目创建。
Uncaught (in promise) 的解决方法，可能原因
seimeii的博客
11-09 1万+
https://blog.csdn.net/qq_22701869/article/details/107816023
Uncaught (in promise) DOMException谷歌浏览器js报错分析
weixin_43254676的博客
05-27 2793
https://www.inqingdao.cn/5988.html
vue tabbar重复点击报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ×××
weixin_47373456的博客
06-03 155
tabbar重复点击报错
路由跳转demo元素没有销毁的问题(使用vue路由拦截)
xiaoxiongxia的博客
06-30 938
路由跳转demo元素没有销毁的问题(使用vue路由拦截)
vite vue3 中提示错误：The node before which the new node is to be inserted is not a child of this node
qq_17686345的博客
08-16 4115
vite vue3 中提示错误：runtime-dom.esm-bundler.js:10 Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
Uncaught (in promise) DOMException: Failed to execute ‘postMessage‘ on ‘Window‘: [object Object]
老衲的少女心i~
04-25 6928
背景介绍： 当前项目是一个由angular重构为vue的类型，在angular界面中，开发vue的功能，并通过iframe的方式嵌入到我们的angular项目中。我在子界面找那个想调用父界面的组件，传入信息，处理数据。子界面中通过data: data})传递信息到父界面。但是，我在子界面中(这个是嵌入的iframe界面)，想向父界面传递消息的时候，报错，父界面无法正常接收提示：以下是本篇文章正文内容，下面案例可供参考主要是对postMessaga的传递信息的一些结构化的理解，需要加深。
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new nod
qiangD的博客
12-16 2万+
insertBefore插入节点出错Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node 插入的节点不是插入在，子节点之前！ insertBefore() 方法
DOMException: Failed to execute 'insertBefore' on 'Node'
changhuzhao的专栏
12-07 5万+
问题：使用vue开发时，抛出如下异常：DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. 经资料查询发现，导致上述异常是因为在html中使用了v-if来控制局部显隐导致的。
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+vite+antd 后台管理系统基础模板
02-06
vue3+vite+antd后台管理系统 vue3 vite antd 后台管理系统 基础模板 vite秒启动 弃用webpack，解决启动加载过慢的问题
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口 预览:http://dongnan185.com:8083/videos/vue3.mp4 一共两个包： 一个接口包 连的本地postgresql 表及信息有截图 库自己装 一个vue包 ...
基于Vue3+Vite的商品管理系统可视化页面源码.zip
08-21
基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品管理系统可视化页面源码.zip基于Vue3+Vite的商品...
vue切换路由控制台报错，Uncaught (in promise)
年三十的博客
02-10 1817
前言：写代码有点洁癖，看见这种影响美观的报错无法忍受 跳转 vue-router 中同样的路由会报错，不同路由不会提示 经了解，此问题解决方式如下 删除你项目下的依赖 node_modules 文件夹，重新初始化 cnpm / npm install（个人理解是更新部分依赖的版本，但有网友遇到依赖更新后版本没有发生变化，和之前报错版本无差） 单独升级vue-router的版本，cnpm...
Uncaught (in promise) DOMException: Failed to execute ‘open‘ on ‘XMLHttpRequest‘: Invalid URL
SunPeng的博客
02-15 2969
Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
Uncaught (in promise) DOMException: Failed to execute ‘replaceState‘ on ‘History‘: A history state o
weixin_45966674的博客
02-06 2622
简单说 就是你访问的路径不符合 HTTP规范 好好检查一下 一般就是 多了斜杠 或者少了斜杠 多了某个符号。好好检查一下就能解决的问题。这是一个访问路径的错误。
如何选择创建vue3项目还是vue3+vite项目？
02-19
选择创建Vue 3项目还是Vue 3 + Vite项目，取决于你的需和偏好。下面是一些关于两种项目的介绍和比较： 1. Vue 3项目： - Vue 3是Vue.js的最新版本，带来了许多新特性和改进，包括更好的性能、更小的包体积、Composition API等。 - 创建Vue 3项目可以使用Vue CLI，它是一个官方提供的脚手架工具，可以快速搭建Vue项目并提供丰富的插件和配置选项。 2. Vue 3 + Vite项目： - Vite是一个由Evan You（Vue.js的作者）开发的新型构建工具，专为Vue 3设计。它具有快速的冷启动、即时热更新、按需编译等特点。 - 创建Vue 3 + Vite项目可以使用Vite脚手架，它提供了一种基于ES模块的开发方式，可以更快地构建和运行项目。 选择创建Vue 3项目还是Vue 3 + Vite项目，可以考虑以下因素： - 如果你对传统的Vue开发方式已经很熟悉，并且不需要使用Vite的特性，可以选择创建Vue 3项目。 - 如果你想尝试新的开发方式，并且对快速构建和热更新有较高的需求，可以选择创建Vue 3 + Vite项目。 总的来说，两种项目都是基于Vue 3的，选择哪种取决于你的需求和个人偏好。你可以根据具体情况选择适合自己的项目类型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值