vue2中使用JSX语法报错，如何解决？

最新推荐文章于 2025-06-30 00:39:39 发布

转载最新推荐文章于 2025-06-30 00:39:39 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43576565/article/details/130615766

文章标签：

#javascript #vue.js #ecmascript

本文介绍了在Vue2项目中使用JSX语法时遇到的报错问题，详细步骤包括安装必要的Babel插件如babel-plugin-syntax-jsx和transform-vue-jsx，以及在babel配置文件中的正确设置。

vue2中使用JSX语法报错，如何解决？
1、安装必要的依赖和插件：
2、在babel配置文件中添加插件：
3、在组件中使用JSX语法：

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

1、安装必要的依赖和插件：
npm install --save-dev babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props

2、在babel配置文件中添加插件：
{
"plugins": [
"syntax-jsx",
[
"transform-vue-jsx",
{
"moduleName": "vue-jsx"
}
]
]
}