Vue 插件

Vue 插件提供了对 Vue 3 SFC(单文件组件)的支持,插件内部集成了 vue-loader v17 版本。

TIP

对于 Vue 3 JSX / TSX 语法,请使用 Vue JSX 插件

快速开始

安装插件

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

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

注册插件

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

rsbuild.config.ts
import { pluginVue } from '@rsbuild/plugin-vue';

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

注册完插件后,你可以直接在代码中引入 *.vue 单文件组件。

选项

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

vueLoaderOptions

传递给 vue-loader 的选项,请查阅 vue-loader 文档 来了解具体用法。

  • 类型: VueLoaderOptions
  • 默认值:
const defaultOptions = {
  compilerOptions: {
    preserveWhitespace: false,
  },
  experimentalInlineMatchResource: true,
};
  • 示例:
pluginVue({
  vueLoaderOptions: {
    hotReload: false,
  },
});