「B5试坑」尝试在 vue-cli4 搭建的项目中嵌入 react 组件

在尝试将 react 组件嵌入使用 vue-cli4 搭建的项目时，首先引入了第三方工具 vuera，通过其提供的代码进行嵌入。然而，在执行过程中遇到了tsx文件无法识别或编译的问题。为解决此问题，我们继续安装了react并配置了babel。需要注意的是，由于项目使用的是vue-cli3以上的版本，因此在编写配置文件时应考虑到此版本的特定需求。

为了确保正确嵌入react组件，对babel.config.js进行了编辑。官方文档提供了详细指导，包括使用特定格式的插件（如 '@babel/plugin')，以避免出现错误。同时，针对vue.config.js的调整，旨在确保项目中不同类型的文件能够得到正确的处理。由于官方强调babel不会基于文件位置使用，需要通过webpack配置来区分.vue文件和其他以jsx/tsx结尾的文件。

在调整配置后，可能还需要对import路径进行检查。确保路径的正确性，包括添加文件的.tsx扩展名，以便让系统正确识别和编译。在某些情况下，由于项目使用的是vue-cli工具链，可以利用审查工具进行深入诊断。具体操作为，在具有@vue/cli-service的项目中，通过命令行执行npx vue-cli-service inspect并输出到output.js文件中，获取更多关于webpack配置的细节。

在完成上述步骤后，如果仍然遇到编译问题，可能需要检查导入的react组件类型。确保组件使用function或class组件形式，避免使用箭头函数，以符合react的预期。最终，经过多次调整和测试，成功将react组件嵌入到vue项目中，解决了在编译过程中遇到的大部分问题。

您可能感兴趣问答

Collapsible

热门标签

热点问答