@vue/babel-preset-jsx 和 @vue/babel-plugin-jsx

这两个插件，乍一看很像，功能也是一致的——让vue支持jsx语法

那么他们两到底有什么区别呢？ 这里就给大家详细说一说

一、背景：

在使用脚手架构建项目的时候，拉取下来的项目模版，不能够支持jsx的语法，通过排查发现项目使用的是@vue/babel-plugin-jsx，随即修改为@vue/babel-preset-jsx后即可以正常解析

二、@vue/babel-plugin-jsx

    该组件只适用于vue3.x

使用：

npm install @vue/babel-plugin-jsx -D

在babe.config.js中加入：

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

eg：

const App = {
  render() {
    return <div>Vue 3.0</div>;
  },
};

三、@vue/babel-preset-jsx

该组件只适用于vue2.x

 

 使用：

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

在babe.config.js中加入：

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

 插件地址

上面就是全部内容啦，有问题欢迎指正