Vue应用挂载报错mount target selector returned null，求排查遗漏点

报错Failed to mount app: mount target selector returned null的核心原因是你的app.js脚本在挂载目标<div id="app">之前就执行了。浏览器解析HTML是按从上到下的顺序进行的，脚本执行时<div id="app">还未被创建，Vue自然找不到对应的挂载元素。

解决方法 #

方法一：调整脚本位置（推荐） #

把<script src="app.js"></script>移动到<div id="app"></div>的后面，确保脚本执行时挂载元素已经存在：
修改后的index.html代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>Hello Vue !</h1>
    <div id="app"></div>
    <script src="app.js"></script>
</body>
</html>

方法二：监听DOM加载完成事件 #

如果脚本必须放在当前位置，可以在app.js中通过DOMContentLoaded事件确保DOM完全加载后再执行挂载逻辑：
修改后的app.js代码：

document.addEventListener('DOMContentLoaded', () => {
  const app = Vue.createApp({
      template: '<h2> I am the template</h2>',
  })
  app.mount("#app")
})

补充说明 #

两种方法都能解决问题，第一种更符合Vue入门项目的常规写法，逻辑直接清晰；第二种适合脚本位置无法调整的特殊场景。

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