Vite 创建的 React 项目里怎么用 Vue 组件？

百里彦会提问于 2026-03-01 11:09:19 阅读 6

框架

我用 Vite 初始化了一个 React 项目，但因为历史原因需要临时引入一个 Vue 单文件组件。试了直接 import 报错说不支持 .vue 文件，是不是得额外装插件？

我看到有些方案说要用 @vitejs/plugin-vue，但不确定在 React 项目里能不能混用。下面是我尝试引入的 Vue 组件代码：

<template>
  <div>Hello from Vue!</div>
</template>

<script>
export default {
  name: 'TestComponent'
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

公孙丽苹 Lv1

这个问题确实有点折腾，但能解决。Vite 本身不认识 .vue 文件，所以得把 Vue 的插件装上，让它能解析单文件组件。

核心步骤就这几步：

先装依赖，npm install vue @vitejs/plugin-vue，这两个都得装。

然后改 vite.config.js，把 vue 插件加进去：

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import vue from '@vitejs/plugin-vue'



export default defineConfig({

  plugins: [react(), vue()],

})

到这里 .vue 文件就能正常 import 了，但还有个问题：React 和 Vue 的渲染机制不一样，不能直接当 React 组件用。

一般这样处理，在 React 组件里挂一个 div 当容器，用 useEffect 把 Vue 组件挂载上去：

import { useEffect, useRef } from 'react'

import { createApp } from 'vue'

import TestComponent from './TestComponent.vue'



function App() {

  const containerRef = useRef(null)



  useEffect(() => {

    if (containerRef.current) {

      const app = createApp(TestComponent)

      app.mount(containerRef.current)

      return () => app.unmount()

    }

  }, [])



  return 


}

这样就能跑起来了。不过说实话，这种混用方式维护起来挺痛苦的，能迁移就尽早迁移吧，两套生态混在一起久了全是坑。

2026-03-01 11:12