Vue中Uncaught TypeError: node is null错误的解决咨询

问题根源 #

你的问题核心出在main.js中的重复应用挂载逻辑。你先后执行了两次createApp(App)和两次mount("#app")：第一次挂载后，Vue已经接管了#app节点并完成渲染；第二次挂载时，原DOM节点的状态已被破坏，导致找不到可用的挂载节点，最终抛出node is null错误。

解决方案 #

1. 修复main.js的挂载逻辑 #

修改main.js，只保留一次应用创建和挂载流程，同时确保全局组件注册路径完整：

import { createApp } from "vue";
import App from "./App.vue";
import TheButton from "./components/TheButton.vue"; // 补全.vue后缀，避免路径解析问题

const app = createApp(App);
app.component("the-button", TheButton);
app.mount("#app"); // 仅执行一次挂载操作

2. 优化App.vue的模板结构 #

虽然Vue 3支持多根节点模板，但建议用统一容器包裹所有内容，避免潜在的渲染异常：

<template>
  <div class="app-wrapper">
    <div>
      <TheQuestion></TheQuestion>
    </div>
    <br />
    <TheMenu></TheMenu>
  </div>
</template>

<script>
import TheQuestion from "./components/TheQuestion.vue";
import TheMenu from "./components/TheMenu.vue";

export default {
  components: {
    TheQuestion,
    TheMenu,
  },
};
</script>

这类错误的通用处理方法 #

• 检查挂载逻辑：确保全局只调用一次mount()，不要重复创建Vue实例，这是node is null最常见的触发原因。
• 验证挂载节点：确认index.html中存在id="app"的DOM节点，且没有其他脚本提前移除或修改该节点。
• 排查组件语法：检查组件模板是否存在未闭合标签、使用未注册组件等语法错误，全局组件要确保注册路径正确。
• 逐步排查组件：当引入新组件后崩溃，逐个注释组件的引入和使用，定位到具体出错的组件后再检查其依赖和代码。
• 用调试工具排查：打开Vue DevTools查看组件树状态，确认组件是否正确注册，排查生命周期钩子或数据逻辑中的异常。

内容的提问来源于stack exchange，提问作者ewerrewerrewwewer