Vue 2.4.2可运行代码切换至Vue 3.1.5版本后启动失败求助

• API语法不兼容：Vue 3 完全废弃了Vue 2 中new Vue()的实例化写法，不再支持通过配置el参数自动挂载节点；同时Vue 3 要求所有组件的data选项必须是返回对象的函数，不再支持根组件直接写data对象的写法。
• 构建包格式错误：你引入的vue.cjs.js是CommonJS格式的包，仅适用于Node.js服务端环境，无法在浏览器中直接执行，浏览器需要使用UMD格式的Vue 3构建包。

按以下步骤修改代码即可正常运行：

1. 将Vue 3的CDN地址替换为浏览器可用的UMD格式版本
2. 改用createApp方法创建应用实例，调用mount方法手动挂载到对应节点
3. 将data修改为返回配置对象的函数

修正后的完整代码如下：

<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">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{mensaje}}</h1>
    </div>
    <!-- 替换为Vue 3 浏览器可用版本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.5/vue.global.js"></script>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    mensaje: 'Hello Vue.js'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

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