Vue CLI中createApp可用但Vue.createApp失效的原因是什么？

1. 页面空白的根本原因 #

你当前使用的是Vue 3版本，Vue 3 已经移除了 Vue 2 时代的全局Vue构造函数导出，所有核心API都改为独立的具名导出。因此你执行import { Vue } from 'vue'时，拿到的Vue变量实际是undefined，调用undefined.createApp()会直接抛出运行时错误，导致页面渲染中断白屏。

2. 两种createApp调用方式的差异 #

不存在功能差异，因为Vue.createApp本身就是 Vue 2 的兼容写法，在原生 Vue 3 中根本不支持。Vue 3 仅支持直接导入createAppAPI调用，不存在全局Vue对象可以调用该方法。

3. Vue 3 挂载全局变量的正确实现 #

如果你需要实现类似 Vue 2 中Vue.prototype.$xxx的全局变量挂载效果，可以通过createApp生成的应用实例的config.globalProperties配置项实现，示例代码如下：

import { createApp } from 'vue'
// 注意：脚手架默认生成的App.vue是默认导出，不需要加{}解构
import App from './App.vue'

const app = createApp(App)
// 挂载全局变量，非setup语法的组件内可直接通过this.$customVar访问
app.config.globalProperties.$customVar = '全局可访问的自定义内容'

app.mount('#app')

如果你的组件使用了<script setup>语法，没有this上下文，可以通过getCurrentInstance方法获取实例访问全局变量：

import { getCurrentInstance } from 'vue'

// 解构获取代理对象
const { proxy } = getCurrentInstance()
console.log(proxy.$customVar)

额外提示：如果你的项目是从Vue 2升级来的，需要兼容旧的Vue.createApp写法，可以安装@vue/compat适配包处理，但原生Vue 3不支持该写法。

内容的提问来源于stack exchange，提问作者Zack Plauché