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

Vue JSX 插件

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

TIP

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

快速开始

安装插件

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

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

注册插件

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

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

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

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

选项

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

vueJsxOptions

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

  • 类型：
type VueJSXPluginOptions = {
  /** 将 `on: { click: xx }` 转换为 `onClick: xxx` */
  transformOn?: boolean;
  /** 是否启用优化。 */
  optimize?: boolean;
  /** 合并静态和动态 class / style 属性 / onXXX 事件处理函数 */
  mergeProps?: boolean;
  /** 配置自定义元素 */
  isCustomElement?: (tag: string) => boolean;
  /** 启用对象插槽语法 */
  enableObjectSlots?: boolean;
  /** 替换用于编译 JSX 表达式的函数 */
  pragma?: string;
};

  • 默认值： {}

  • 示例：

pluginVueJsx({
  vueJsxOptions: {
    transformOn: true,
  },
});