Vue

如何使用

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

使用 Rsbuild：Rsbuild 提供对 Vue 3 和 Vue 2 开箱即用的支持，能够快速创建一个 Vue 项目，详见 Rsbuild - Vue 3 或 Rsbuild - Vue 2。
手动配置 Rspack：你可以参考当前文档，手动添加 Vue 相关的配置。

Vue 3

目前，Rspack 已经完成了对 Vue3 的支持，请确保你的 vue-loader 版本 >= 17.2.2，并进行如下配置：

rspack.config.mjs

import { defineConfig } from '@rspack/cli';
import { VueLoaderPlugin } from 'vue-loader';

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

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

rspack.config.mjs

export default {
  module: {
    rules: [
+      {
+        test: /\.less$/,
+        loader: "less-loader"
+        type: "css"
+      }
    ]
  }
}

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

如果你不希望生成 CSS 文件，也可以直接配合 css-loader 和 vue-style-loader 组合使用：

rspack.config.mjs

export default {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader'],
        type: 'javascript/auto',
      },
    ],
  },
  experiments: {
    css: false, // 此时需要关闭 `experiments.css` 以适配 `vue-loader` 内部处理逻辑
  },
};

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

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

相关示例可以参考 example-vue3。

Vue 2

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

请确保在配置 Vue2 项目时关闭 experiments.css 或在 CSS 相关的规则中使用 Rule.type = "javascript/auto"：

rspack.config.mjs

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader'],
        type: 'javascript/auto',
      },
      {
        test: /\.ts$/, // 如果需要在 Vue SFC 里使用 TypeScript, 请添加该规则
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
            },
          },
        },
        type: 'javascript/auto',
      },
    ],
  },
  experiments: {
    css: false,
  },
};

TypeScript 语法是通过 Rspack 内置的 builtin:swc-loader 进行支持的，点击这里查看更多信息。

相关示例可以参考：example-vue2 和 example-vue2-ts。

Vue 3 JSX

由于 Rspack 支持使用 babel-loader 进行转换，因此你可以直接使用 @vue/babel-plugin-jsx 插件来支持 Vue 3 JSX 语法。

安装依赖

首先，你需要安装 babel-loader、@babel/core 和 @vue/babel-plugin-jsx：

npm

yarn

pnpm

bun

deno

npm add babel-loader @babel/core @vue/babel-plugin-jsx -D

添加配置

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

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 的示例可供参考。

#Vue

#如何使用

#Vue 3

#Vue 2

#Vue 3 JSX

#安装依赖

#添加配置

Vue

如何使用

Vue 3

Vue 2

Vue 3 JSX

安装依赖

添加配置