使用Vue.js时出现Cannot read properties of undefined (reading 'use')错误求助

错误原因 #

这个错误的核心是代码中导入的Vue对象为undefined，常见触发场景：

• 项目基于Vue 3开发，但使用了Vue 2的全局API写法（Vue 3不再导出全局Vue对象，改用createApp创建应用实例）
• vue或vue-apollo包版本不匹配，导致无法正确导入Vue

解决方案 #

情况1：项目是Vue 2版本 #

1. 确认package.json中vue版本为2.x，版本不符则执行：

npm install vue@2.x

2. 安装适配Vue 2的vue-apollo版本：

npm install vue-apollo@3.x

3. 原代码可继续使用，确保Vue能正常导入：

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'

Vue.use(VueApollo)

情况2：项目是Vue 3版本 #

Vue 3不再支持全局Vue.use用法，需改用组合式API适配的依赖：

1. 卸载旧依赖，安装适配Vue 3的包：

npm uninstall vue-apollo
npm install @vue/apollo-composable @apollo/client graphql

2. 修改为Vue 3风格的Apollo配置：

import { createApp } from 'vue'
import App from './App.vue'
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'

// 替换为你的GraphQL接口地址
const httpLink = createHttpLink({
  uri: 'https://your-graphql-api-endpoint',
})

const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
})

const app = createApp(App)
app.provide(DefaultApolloClient, apolloClient)
app.mount('#app')

3. 若需保留vue-cli-plugin-apollo，更新到适配Vue 3的最新版：

npm update vue-cli-plugin-apollo

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