在这篇文档中,你可以了解到如何基于 Rsbuild 来构建一个 Vue 2 应用。
你可以使用 create-rsbuild
来创建一个 Rsbuild + Vue 2 的项目,调用以下命令:
然后在 Select framework
时选择 Vue 2
即可。
为了能够编译 Vue 的 SFC(单文件组件),你需要注册 Rsbuild 的 Vue 2 插件,插件会自动添加 Vue 构建所需的配置。
例如,在 rsbuild.config.ts
中注册:
如果你需要使用 Vue 的 JSX 语法,还需要注册 Rsbuild 的 Vue 2 JSX 插件。
在 TypeScript 项目中,你需要为 *.vue
文件添加类型定义,使 TypeScript 能够正确识别它。
请在 src
目录下创建 env.d.ts
,并添加以下内容:
当你执行 rsbuild build
构建应用后,你会在 dist
目录下得到一份静态资源产物,这份产物可以被部署到任意平台或服务器上。
请留意 Rsbuild 默认的产物结构并不适用于所有的平台,因为不同的平台对产物目录结构有不同的要求。你可以参考 构建产物目录 章节对目录结构进行修改,以满足部署平台的要求。
此外,如果你需要在本地预览待部署的产物,可以使用 Rsbuild CLI 提供的 rsbuild preview 命令。