在Vite搭建的Vue3项目中如何正确引用Vue实例？

报错根因 #

Vue 3 废弃了 Vue 2 版本的默认导出规范，所有API均改为具名导出，不存在默认导出的Vue构造函数，因此import Vue from 'vue'写法会直接触发模块导出不存在的错误：

Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=d734dbd3' does not provide an export named 'default'

修正方案 #

1. 导入写法调整

如果需要获取类似Vue 2的全局Vue对象效果，可以改为全量导入所有导出内容：

import * as Vue from 'vue'

更推荐的写法是按需导入所需API，减小打包体积。

2. 原有全局API对应实现

你提到的几个常用API在Vue 3中的替代方案如下：

• Vue.config：Vue 3的全局配置项改为挂载在createApp生成的应用实例上，示例如下：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 对应Vue2的Vue.config.errorHandler等配置
app.config.errorHandler = (err) => {
  console.error('全局错误捕获', err)
}
app.mount('#app')

• Vue.observable()：Vue 3中该API更名为reactive，功能完全一致：

import { reactive } from 'vue'
// 等价于Vue 2的Vue.observable({ count: 0 })
const state = reactive({ count: 0 })

• Vue.set() / Vue.delete()：Vue 3响应式基于Proxy实现，不需要额外API处理新增/删除属性的响应式问题，直接操作原生对象即可自动触发响应式更新：

const state = reactive({})
// 直接新增属性，自动具备响应式
state.newKey = '测试值'
// 直接删除属性，响应式自动生效
delete state.newKey

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