Vue项目编译报错Cannot read properties of undefined (reading 'use')求助

核心问题 #

你遇到的Cannot read properties of undefined (reading 'use')错误，本质是Vue3与Vue2的API不兼容：

1. Vue3不再暴露全局的Vue构造函数，import Vue from 'vue'得到的是undefined，调用Vue.use()自然报错。
2. 你依赖的bootstrap-vue@2.23.1仅支持Vue2，和Vue3完全不兼容。
3. vue-axios在Vue3中的用法和Vue2完全不同。

分步解决 #

1. 移除不兼容依赖 #

首先卸载和Vue3冲突的包：

npm uninstall bootstrap-vue vue-loader

• bootstrap-vue@2.x不支持Vue3，若需要Bootstrap组件，后续可更换为支持Vue3的bootstrap-vue-next
• vue-loader已被Vue CLI 5自动集成，无需手动安装在依赖中

2. 调整项目入口文件（main.js） #

修改src/main.js为Vue3的标准初始化方式，并配置axios：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
// 用VueAxios注册axios
app.use(VueAxios, axios)
app.mount('#app')

3. 修改HelloWorld.vue代码 #

移除Vue2的全局API调用，改用Vue3的组件内使用方式：

<script>
export default {
  name: 'HelloWorld',
  mounted() {
    // 直接通过this访问axios
    this.axios.get('https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=c9723e0fa4f3491bba98d4f04a8d0163')
      .then(resp => {
        console.warn(resp)
      })
  }
}
</script>

4. 重新安装依赖并启动 #

rm -rf node_modules package-lock.json
npm install
npm run serve

可选简化方案 #

若不需要全局注册axios，也可以直接在组件中导入axios使用，无需依赖vue-axios：

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  mounted() {
    axios.get('你的接口地址')
      .then(resp => console.warn(resp))
  }
}
</script>

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