如何在现有HTML页面挂载Vue组件？Vite构建报错求助

核心问题 #

你当前代码混用了Vue2和Vue3的语法：

• 组件使用了Vue3的<script setup>语法和@chat-ui/vue3（Vue3专属组件库），但main.js沿用了Vue2的import Vue from 'vue'和全局组件注册方式。Vue3的包不再导出默认Vue对象，因此触发该错误。

修正步骤 #

1. 重写main.js（适配Vue3） #

替换原有main.js代码：

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

// 创建Vue应用实例
const app = createApp({})
// 全局注册组件
app.component('MyComponent', MyComponent)
// 挂载到页面指定根容器（需确保HTML中存在对应元素）
app.mount('#app')

注意：需在HTML页面中添加根容器，例如 <div id="app"><MyComponent></MyComponent></div>，也可挂载到页面已有的元素上。

2. 优化MyComponent.vue（规范写法） #

<script setup>会自动处理组件导出，无需额外编写export default，可简化代码：

<template>
   <h2>Hi</h2>
   <!-- 直接使用导入的Chat组件 -->
   <Chat />
</template>

<script setup>
import { ref } from 'vue'
import { Chat } from '@chat-ui/vue3'

console.log('setup')
// 在此编写响应式数据与业务逻辑，例如：
// const message = ref('Hello Vue3')
</script>

若需定义组件名称，Vue3.3+版本可在<script setup>中添加defineOptions({ name: 'MyComponent' })。

3. 确认依赖版本 #

确保项目安装的是Vue3：

# 查看当前Vue版本
npm list vue
# 若为Vue2，卸载后安装Vue3
npm uninstall vue
npm install vue@latest

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