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.js

  1. const { VueLoaderPlugin } = require('vue-loader');
  3. /** @type {import('@rspack/cli').Configuration} */
  4. const config = {
  5.   // ...
  6.   plugins: [new VueLoaderPlugin()],
  7.   module: {
  8.     rules: [
  9.       // ...
  10.       {
  11.         test: /\.vue$/,
  12.         loader: 'vue-loader',
  13.         options: {
  14.           // 注意，为了绝大多数功能的可用性，请确保该选项为 `true`
  15.           experimentalInlineMatchResource: true,
  16.         },
  17.       },
  18.     ],
  19.   },
  20. };
  21. module.exports = config;

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

  1. const config = {
  2.   module: {
  3.     rules: [
  4. +      {
  5. +        test: /\.less$/,
  6. +        loader: "less-loader"
  7. +        type: "css"
  8. +      }
  9.     ]
  10.   }
  11. }
  12. module.exports = config;

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

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

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.less$/,
  6.         use: ['vue-style-loader', 'css-loader', 'less-loader'],
  7.         type: 'javascript/auto',
  8.       },
  9.     ],
  10.   },
  11.   experiments: {
  12.     css: false, // 此时需要关闭 `experiments.css` 以适配 `vue-loader` 内部处理逻辑
  13.   },
  14. };

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

  1. <script lang="ts">
  2.   export default {
  3.     // ...
  4.   };
  5. </script>

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

Vue 2

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

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

rspack.config.js

  1. module.exports = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.css$/,
  6.         use: ['vue-style-loader', 'css-loader'],
  7.         type: 'javascript/auto',
  8.       },
  9.       {
  10.         test: /\.ts$/, // 如果需要在 Vue SFC 里使用 TypeScript, 请添加该规则
  11.         loader: 'builtin:swc-loader',
  12.         options: {
  13.           jsc: {
  14.             parser: {
  15.               syntax: 'typescript',
  16.             },
  17.           },
  18.         },
  19.         type: 'javascript/auto',
  20.       },
  21.     ],
  22.   },
  23.   experiments: {
  24.     css: false,
  25.   },
  26. };

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

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

添加配置

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

rspack.config.js

  1. /** @type {import('@rspack/cli').Configuration} */
  2. const config = {
  3.   context: __dirname,
  4.   entry: {
  5.     main: './src/index.jsx',
  6.   },
  7.   module: {
  8.     rules: [
  9.       {
  10.         test: /\.jsx$/,
  11.         use: [
  12.           {
  13.             loader: 'babel-loader',
  14.             options: {
  15.               plugins: ['@vue/babel-plugin-jsx'],
  16.             },
  17.           },
  18.         ],
  19.       },
  20.     ],
  21.   },
  22. };
  23. module.exports = config;

Rspack 提供了一个 Vue JSX 的示例可供参考。