vue2中使用JSX语法报错,如何解决?

vue2中使用JSX语法报错,如何解决?
(本地会报错,但是通过Jenkins发布,页面是能正常显示的)

img


项目可以正常启动,页面控制台会报错。

img


尝试过
https://github.com/vuejs/jsx-vue2#installation
https://github.com/vuejs/babel-plugin-transform-vue-jsx
方法都没用,报错信息也没变。
vue版本是"vue": "^2.6.14",

在Vue2中使用JSX语法需要借助Babel插件来进行转换,具体操作如下:

1、安装必要的依赖和插件:

npm install --save-dev babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props

在babel配置文件中添加插件:

{
  "plugins": [
    "syntax-jsx",
    [
      "transform-vue-jsx",
      {
        "moduleName": "vue-jsx"
      }
    ]
  ]
}

在组件中使用JSX语法:

import Vue from 'vue';

export default Vue.extend({
  render() {
    return <div>Hello, World!</div>;
  }
});

注意:使用JSX语法时,组件的template选项会被忽略。

  • 这篇博客: Babel常用的插件中的 作用: Vue中的渲染函数可以支持JSX语法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • JSX是JavaScript语法扩展