Vue中如何通过render直接渲染一个div标签

Question

Vue中如何通过render直接渲染一个div标签

问题相关代码

import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(<div>1231</div>),
}).$mount('#app')

运行结果及报错内容

我的解答思路和尝试过的方法

尝试过通过webpack，通过vue-loader, vue-template-compiler 还是不成功，请帮忙看看有什么办法可以解决
感谢感谢

Answer 1

问题已经解决！
通过babel-plugin-transform-vue-jsx 插件，对jsx进行转义方可直接访问，同时还需要安装babel-plugin-syntax-jsx与babel-loader，才不会报错！
创建babel.config.js文件，内容如下

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:  ["transform-vue-jsx"], // 这行代码为重点
}

vue.config.js中创建babel-loader,详情如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.module.rule('jsx').test(/\.(jsx?|babel|es6)$/).use('babel-loader').loader('babel-loader');
  }
})

注意：render函数的h参数不可以去掉，不然会直接报错

所有代码为：
main.js文件

import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: (h) => {
    return (<div>1231</div>);
  },
}).$mount('#app')

packge.json文件

{
  "name": "webpack-vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "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",
    "babel-loader": "^8.2.5",   // 主要是这三行
    "babel-plugin-syntax-jsx": "^6.18.0", // 主要是这三行
    "babel-plugin-transform-vue-jsx": "^3.7.0",  // 主要是这三行
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

效果图：