Vue 2

在这篇文档中,你可以了解到如何基于 Rsbuild 来构建一个 Vue 2 应用。

创建 Vue 2 项目

你可以使用 create-rsbuild 来创建一个 Rsbuild + Vue 2 的项目,调用以下命令:

npm
yarn
pnpm
bun
npm create rsbuild@latest

然后在 Select framework 时选择 Vue 2 即可。

在已有项目中使用 Vue2

为了能够编译 Vue 的 SFC(单文件组件),你需要注册 Rsbuild 的 Vue 2 插件,插件会自动添加 Vue 构建所需的配置。

例如,在 rsbuild.config.ts 中注册:

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginVue2 } from '@rsbuild/plugin-vue2';

export default defineConfig({
  plugins: [pluginVue2()],
});
TIP
  • Vue 2 插件仅支持 Vue >= 2.7.0 版本。
  • 对于使用 Vue CLI 的项目,可以参考 Vue CLI 迁移指南

使用 Vue JSX 语法

如果你需要使用 Vue 的 JSX 语法,还需要注册 Rsbuild 的 Vue 2 JSX 插件

类型声明

在 TypeScript 项目中,你需要为 *.vue 文件添加类型定义,使 TypeScript 能够正确识别它。

请在 src 目录下创建 env.d.ts,并添加以下内容:

src/env.d.ts
declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}

部署应用

当你执行 rsbuild build 构建应用后,你会在 dist 目录下得到一份静态资源产物,这份产物可以被部署到任意平台或服务器上。

请留意 Rsbuild 默认的产物结构并不适用于所有的平台,因为不同的平台对产物目录结构有不同的要求。你可以参考 构建产物目录 章节对目录结构进行修改,以满足部署平台的要求。

此外,如果你需要在本地预览待部署的产物,可以使用 Rsbuild CLI 提供的 rsbuild preview 命令。