Vue3+Express项目报错：模块未导出‘Vue’问题求助

问题 #

使用Express和Vue.js（Vite搭建）开发时，出现以下错误：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=460a75c2' does not provide an export named 'Vue' (at main.js?t=1667997788986:1:9)

你提供的代码存在文件内容混淆（标注的App.vue实际是入口文件main.js的内容，标注的main.js实际是根组件App.vue的内容），同时存在Vue3语法使用错误。

错误原因 #

• Vue3导出变更：Vue3中不再导出名为Vue的全局构造函数，仅提供createApp用于创建应用实例，因此import {Vue, createApp} from 'vue'会触发导出不存在的错误。
• 插件注册方式错误：Vue3废弃了Vue.use()全局注册插件的方式，必须通过createApp返回的应用实例调用use()方法。
• 文件逻辑混淆：入口文件与根组件的代码写混，导致执行流程错误。
• 组件代码问题：App.vue中存在未定义变量（response、baseUrl），请求异常时无错误处理。

修正后的代码 #

1. main.js（项目入口文件） #

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

// 创建应用实例
const app = createApp(App)
// 注册vue-axios插件
app.use(VueAxios, axios)
// 将axios挂载到全局，方便组件内直接调用
app.config.globalProperties.$axios = axios
// 挂载应用到DOM节点
app.mount('#app')

2. App.vue（根组件） #

<script>
export default {
  data() {
    return {
      dataResponse: [],
      baseUrl: '你的API基础地址' // 替换为实际的后端接口地址
    }
  },
  methods: {
    async getDataResponse() {
      try {
        // 使用全局挂载的$axios发起请求
        const res = await this.$axios.get(`${this.baseUrl}/catalog/home`)
        // 打印响应数据，通常业务数据在res.data中
        console.log(res.data)
        this.dataResponse = res.data
      } catch (error) {
        // 捕获请求错误，避免页面崩溃
        console.error('数据请求失败:', error)
      }
    }
  },
  created() {
    // 组件创建时触发请求
    this.getDataResponse()
  }
}
</script>

<template>
  <h1>Welcome</h1>
</template>

关键说明 #

• 移除所有对Vue构造函数的引用，Vue3的应用完全基于createApp生成的实例进行操作。
• 插件注册必须通过应用实例的use()方法，不能再使用全局Vue.use()。
• 组件内可通过this.$axios调用接口（需先在main.js中挂载到全局），也可在组件内单独导入axios使用。
• 补充请求错误捕获逻辑，避免因接口异常导致页面无法正常运行。

内容的提问来源于stack exchange，提问作者Jesús Córdova