vue2中使用react组件

参考：https://blog.csdn.net/Claire_cz/article/details/125257392

​ https://www.jianshu.com/p/933d3961f9f2

按照https://blog.csdn.net/Claire_cz/article/details/125257392中配置后可能出现vue中的jsx无法使用。所以babel.config.js不需要改动,需要改动webpack的配置。

安装依赖

npm i @babel/preset-react react react-dom vuera @babel/plugin-transform-react-jsx

依赖版本

"dependencies": {
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@babel/preset-react": "^7.18.6",
    "antd": "^5.0.0",
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.8",
    "file-saver": "^2.0.5",
    "html2canvas": "^1.4.1",
    "js-base64": "^3.7.2",
    "lib-flexible": "^0.3.2",
    "mathpix-markdown-it": "^1.0.78",
    "moment": "^2.29.4",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "pinyin-match": "^1.2.2",
    "postcss-plugin-px2rem": "^0.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.1",
    "video.js": "^7.20.3",
    "vue": "^2.6.14",
    "vue-audio-better": "^3.0.1",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.6.5",
    "vue-video-player": "^5.0.2",
    "vue2-editor": "^2.10.3",
    "vuera": "^0.2.7",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14",
    "webpack-cli": "^4.10.0"
  },

main.js

import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
}

vue.config.js

  configureWebpack: {
    //js 分块处理
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.时间戳】
      path: path.resolve(__dirname, "dist"),
      filename: `js/[name].${version}.js`
    },
    plugins: [new NodePolyfillPlugin()],
    module: {
      rules: [
        {
          test: /\.jsx$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    "@babel/preset-react",
                    {
                      pragma: "React.createElement",
                    }
                  ]
                ],
                plugins: [`@babel/plugin-transform-react-jsx`]
              }
            }
          ],
          include: path.resolve(__dirname, 'src'),
          exclude: path.resolve(__dirname, "node_modules/"),
        }
      ]
    }
  }