当前位置：首页 > news >正文

使用veaury，在vue项目中运行react组件

news 2025/5/5 4:17:39

网上的信息太少了，记录一下
我的项目是vue3+webpack
使用：veaury
Veaury 是基于React和Vue3的工具库，主要用于React和Vue在一个项目中公共使用的场景，主要运用在项目迁移、技术栈融合的开发模式、跨技术栈使用第三方组件的场景。
参考：
https://github.com/gloriasoft/veaury/tree/master/dev-project-vue3

建议：把这个项目拉下来运行，如果自己项目存在依赖报错，可以在这个项目上修改对比测试

如果是用vite直接看项目主页的配置：
https://github.com/gloriasoft/veaury/tree/master

前提：安装

    "react": "^19.1.0","react-dom": "^19.1.0","veaury": "^2.6.2","babel-preset-react-app": "^10.1.0",

因为react版本高于19.0，在main.js中配置：

// react-dom >= 19
import { createRoot } from 'react-dom/client'
import { setVeauryOptions } from 'veaury'
setVeauryOptions({react: {createRoot}
})

写了一个测试用的TestComponent.jsx

import React from 'react'
console.log('React========>?', React)
const TestComponent = () => {return (<div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '5px' }}><h1>Hello from React!</h1><p>This is a test React component rendered inside a Vue app.</p></div>)
}export default TestComponent

在vue代码中使用：

<template><div><iconContent/></div>
</template>
<script>
import { applyPureReactInVue } from 'veaury'
import TestComponent from '@/views/ai/react/base/app-icon/TestComponent.jsx'
export default {components: {iconContent: applyPureReactInVue(TestComponent)},
}

运行报错：
Uncaught Error: Objects are not valid as a React child (found: object with keys {__v_isVNode, __v_skip, type, props, key, ref, scopeId, slotScopeIds, children, component, suspense, ssContent, ssFallback, dirs, transition, el, anchor, target, targetStart, targetAnchor, staticCount, shapeFlag, patchFlag, dynamicProps, dynamicChildren, appContext, ctx}). If you meant to render a collection of children, use an array instead.

*在这里插入图片描述*

我最开始把这段配置漏了
在这里插入图片描述

加上之后运行又报错：

‘loose’ mode configuration must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled).
在这里插入图片描述
我的配置里用了
plugins: [
‘@babel/plugin-transform-private-methods’
]
@babel/plugin-transform-private-methods 插件，来处理依赖中类中的私有方法（以 # 开头的方法）。
如果你没有用，应该不会报错了

最终babel.config.js文件：

const path = require('path')
function resolve (dir) {return path.join(__dirname, dir)
}module.exports = {presets: ['@vue/cli-plugin-babel/preset',['veaury/babel/ReactPreset', {// for dev onlytest: function (filename) {// The files in the following paths are compiled with React's jsx// 我的react代码都放在react目录下if (filename?.startsWith(resolve('src')) && filename.match(/[/\\]react[\\/$]+/) || filename?.startsWith(resolve('../src'))) return filename}}]],plugins: [['@babel/plugin-transform-class-properties', { loose: true }],['@babel/plugin-transform-private-methods', { loose: true }],['@babel/plugin-transform-private-property-in-object', { loose: true }]]
}