指南
配置
插件
API
指南
配置
插件
API
简体中文

Vue2 JSX 插件

Vue2 JSX 插件提供了对 Vue 2 JSX / TSX 语法的支持，插件内部集成了 @vue/babel-preset-jsx。

TIP

Vue2 JSX 插件依赖 Babel 编译，需要额外添加 Babel 插件，同时，添加 Babel 插件会产生额外的编译开销。

快速开始

安装插件

你可以通过如下的命令安装插件:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-vue2-jsx -D

注册插件

你可以在 rsbuild.config.ts 文件中注册插件：

rsbuild.config.ts
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx';

export default {
  plugins: [pluginBabel(), pluginVue2Jsx()],
};

注册完插件后，你可以直接在代码中可以使用 Vue 的 JSX / TSX 语法。

选项

如果你需要自定义 Vue JSX 的编译行为，可以使用以下配置项。

vueJsxOptions

传递给 @vue/babel-preset-jsx 的选项，请查阅 @vue/babel-preset-jsx 文档 来了解具体用法。

  • 类型：
type VueJSXPresetOptions = {
  compositionAPI?: boolean | string;
  functional?: boolean;
  injectH?: boolean;
  vModel?: boolean;
  vOn?: boolean;
};
  • 默认值：
const defaultOptions = {
  injectH: true,
};
  • 示例：
pluginVue2Jsx({
  vueJsxOptions: {
    injectH: false,
  },
});