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

这个问题其实挺有意思的，我之前也遇到过类似情况。原理是这样：Vite默认只处理React的文件类型，要支持Vue组件确实需要额外配置。下面我把具体步骤一步步说清楚：

首先需要安装必要的依赖：

npm install @vitejs/plugin-vue vue

然后在vite.config.js里做这样的修改：

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import vue from '@vitejs/plugin-vue'



export default defineConfig({

  plugins: [

    react(),

    vue() // 关键在这里，要同时启用react和vue插件

  ]

})

接下来要创建一个Vue组件的wrapper，因为在React里不能直接使用Vue组件。新建一个VueWrapper.jsx：

import { defineComponent, h } from 'vue'

import { createApp } from 'vue/dist/vue.esm-bundler'



export function VueWrapper(Component, props) {

  return defineComponent({

    mounted() {

      const app = createApp(Component, props)

      app.mount(this.$el)

    },

    render() {

      return h('div')

    }

  })

}

最后在React组件里这样使用：

import { useEffect, useRef } from 'react'

import { VueWrapper } from './VueWrapper'

import TestComponent from './TestComponent.vue'



function MyReactComponent() {

  const containerRef = useRef(null)

  

  useEffect(() => {

    const wrapper = new VueWrapper(TestComponent, {})

    wrapper.mount(containerRef.current)

  }, [])



  return <div ref={containerRef} />

}

注意几个关键点：
1. 需要同时启用react和vue插件，它们是可以共存的
2. 必须用vue/dist/vue.esm-bundler这个版本
3. 需要通过ref手动挂载Vue组件
4. 记得给.vue文件添加正确的文件类型处理

这方案稍微有点hack，但确实能解决问题。如果只是临时需求可以这么用，长期项目还是建议重构掉这种混合方案。

这个问题确实有点折腾，但能解决。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 


}

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