> For AI agents: the complete documentation index is available at https://rspack.rs/zh/llms.txt, the full documentation bundle is available at https://rspack.rs/zh/llms-full.txt.

# Vue

## 如何使用

Rspack 提供两种方案来支持 Vue：

- **使用 Rsbuild**：Rsbuild 提供对 Vue 3 和 Vue 2 开箱即用的支持，能够快速创建一个 Vue 项目，详见 [Rsbuild - Vue 3](https://rsbuild.rs/zh/guide/framework/vue#vue-3) 或 [Rsbuild - Vue 2](https://rsbuild.rs/zh/guide/framework/vue#vue-2)。
- **手动配置 Rspack**：你可以参考当前文档，手动添加 Vue 相关的配置。

## Vue 3

目前，Rspack 已经完成了对 Vue 3 的支持，请确保你的 [rspack-vue-loader](https://github.com/rstackjs/rspack-vue-loader) 版本 >= 17.2.2，并进行如下配置：

```js title="rspack.config.mjs"
import { defineConfig } from '@rspack/cli';
import { VueLoaderPlugin } from 'rspack-vue-loader';

export default defineConfig({
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'rspack-vue-loader',
        options: {
          // 注意，为了绝大多数功能的可用性，请确保该选项为 `true`
          experimentalInlineMatchResource: true,
        },
      },
    ],
  },
});
```

由于 Rspack 原生支持了 CSS 模块的编译，因此你无需配置与 CSS 相关的 loader。另外，当你尝试使用 CSS 预处理器（如：less）时，你只需要添加如下配置即可：

```diff title="rspack.config.mjs"
export default {
  module: {
    rules: [
+      {
+        test: /\.less$/,
+        loader: "less-loader"
+        type: "css"
+      }
    ]
  }
}
```

此时，Rspack 将会使用内置的 CSS 处理器进行后处理。

如果你不希望生成 CSS 文件，也可以直接配合 [`css-loader`](https://github.com/webpack/css-loader) 和 [`vue-style-loader`](https://github.com/vuejs/vue-style-loader) 组合使用：

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader'],
        type: 'javascript/auto',
      },
    ],
  },
};
```

除此之外，由于 Rspack 内置了 TS 的支持，因此我们也默认支持了 `lang="ts"` 的配置：

```html
<script lang="ts">
  export default {
    // ...
  };
</script>
```

相关示例可以参考 [example-vue3](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue)。

## Vue 2

Rspack 已经完成对 Vue 2（使用 vue-loader\@15）的兼容。

```js title="rspack.config.mjs"
export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
        type: 'javascript/auto',
      },
      {
        test: /\.(?:js|mjs|ts)$/, // 如果需要在 Vue SFC 里使用 TypeScript, 请添加该规则
        loader: 'builtin:swc-loader',
        options: {
          detectSyntax: 'auto',
        },
      },
    ],
  },
  experiments: {
    css: false,
  },
};
```

TypeScript 语法是通过 Rspack 内置的 `builtin:swc-loader` 进行支持的，点击[这里](https://rspack.rs/zh/guide/features/builtin-swc-loader.md)查看更多信息。

相关示例可以参考：[example-vue2](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue2) 和 [example-vue2-ts](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue2-ts)。

## Vue 3 JSX

由于 Rspack 支持使用 `babel-loader` 进行转换，因此你可以直接使用 [@vue/babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx) 插件来支持 Vue 3 JSX 语法。

### 安装依赖

首先，你需要安装 [babel-loader](https://www.npmjs.com/package/babel-loader)、[@babel/core](https://www.npmjs.com/package/@babel/core) 和 [@vue/babel-plugin-jsx](https://www.npmjs.com/package/@vue/babel-plugin-jsx)：


```sh [npm]
npm add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [yarn]
yarn add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [pnpm]
pnpm add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [bun]
bun add babel-loader @babel/core @vue/babel-plugin-jsx -D
```

```sh [deno]
deno add npm:babel-loader npm:@babel/core npm:@vue/babel-plugin-jsx -D
```

### 添加配置

然后添加以下配置，即可在 `.jsx` 文件中使用 Vue 3 JSX 语法：

```js title="rspack.config.mjs"
import { defineConfig } from '@rspack/cli';

export default defineConfig({
  entry: {
    main: './src/index.jsx',
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@vue/babel-plugin-jsx'],
            },
          },
        ],
      },
    ],
  },
});
```

Rspack 提供了一个 Vue JSX 的[示例](https://github.com/rstackjs/rstack-examples/tree/main/rspack/vue-jsx)可供参考。

## Vue DevTools

Vue DevTools 旨在提升 Vue 开发体验，可以显著提高开发和调试 Vue 应用的效率。

对于使用 Rspack 构建的 Vue 应用，可以通过 [vue-devtools-rstack](https://github.com/OskarLebuda/vue-devtools-rstack) 集成 Vue DevTools。