极简Vue3 Hello World应用运行报mount目标找不到错误的原因排查

你遇到的mount target selector "#hello" returned null报错，根本原因是脚本执行顺序不符合DOM解析规则：
浏览器从上到下同步解析HTML代码，你当前在<body>内的元素顺序是：先加载Vue核心脚本 → 再加载执行你的app.js → 最后才渲染<div id="hello">挂载目标。
当app.js执行到app.mount('#hello')这行代码时，<div id="hello">根本还没被创建到DOM树中，自然找不到对应的挂载节点，触发报错。
页面原样显示{{ message }}也和这个问题同源：Vue根本没成功挂载到页面上，自然不会对双大括号的模板语法做替换渲染。

• 你的index.html开头漏了标准的文档声明，且<html>标签缺少左尖括号，当前首行是html lang="en">，完整的标准开头应该是<!DOCTYPE html> + <html lang="en">，避免浏览器启用怪异模式解析页面。
• 之前把业务脚本放在页面上部的写法，哪怕调整了元素顺序，也存在潜在的加载时序风险。

调整index.html内的元素顺序，把需要挂载的DOM元素放在前面，所有依赖DOM的脚本挪到</body>标签之前，保证DOM全部解析完成后再执行脚本逻辑，修改后的结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Random User Generator</title>
</head>
<body>
    <!-- 挂载目标优先被DOM解析 -->
    <div id="hello" class="demo">
        {{ message }}
    </div>
    <!-- 脚本放在页面最底部，等待DOM加载完成后再执行 -->
    <script src="https://unpkg.com/vue@3.0.5"></script>
    <script src="./app.js"></script>
</body>
</html>

如果因为项目结构限制没法调整脚本位置，也可以在app.js中用DOM加载完成事件包裹挂载逻辑，从代码层面规避时序问题：

const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!!'
      }
    }
  })
  
// 等DOM完全解析后再执行挂载
window.addEventListener('DOMContentLoaded', () => {
  app.mount('#hello');
})

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