> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.
# Vite
本章节介绍如何将 Vite 项目迁移到 Rsbuild。
## 安装依赖
首先你需要把 Vite 相关的 npm 依赖替换为 Rsbuild 的依赖。
- 移除 Vite 的依赖：
```sh [npm]
npm remove vite
```
```sh [yarn]
yarn remove vite
```
```sh [pnpm]
pnpm remove vite
```
```sh [bun]
bun remove vite
```
```sh [deno]
deno remove npm:vite
```
- 安装 Rsbuild 的依赖：
```sh [npm]
npm add @rsbuild/core -D
```
```sh [yarn]
yarn add @rsbuild/core -D
```
```sh [pnpm]
pnpm add @rsbuild/core -D
```
```sh [bun]
bun add @rsbuild/core -D
```
```sh [deno]
deno add npm:@rsbuild/core -D
```
## 测试工具
Vitest 使用 Vite 转换和运行测试，因此在继续使用 Vitest 时，请保留 Vite 以及 `vitest.config.*` 引用的所有 Vite 插件。若要从测试工具链中移除 Vite，可以迁移到 [Rstest](https://rstest.rs/)，它能够通过 `@rstest/adapter-rsbuild` 复用 Rsbuild 配置。有关必需的配置和测试 API 变更，请参考[测试](/zh/guide/advanced/testing.md)指南和 [Rstest 迁移指南](https://rstest.rs/zh/guide/migration/vitest)。
仅在确认没有其他开发工具或依赖仍需要 Vite 后，再将其移除。
## TanStack Start
TanStack Start 管理 client 和 server entry、部署产物及框架特定插件。请参考专门的 [TanStack Start 迁移指南](/zh/guide/migration/tanstack-start.md)，而非本页下方通用的构建入口步骤。
## 更新 npm scripts
下一步，你需要把 package.json 中的 npm scripts 更新为 Rsbuild 的 CLI 命令。
```json title="package.json"
{
"scripts": {
"dev": "vite", // [!code --]
"build": "vite build", // [!code --]
"preview": "vite preview", // [!code --]
"dev": "rsbuild", // [!code ++]
"build": "rsbuild build", // [!code ++]
"preview": "rsbuild preview" // [!code ++]
}
}
```
## 创建配置文件
在 package.json 的同级目录下创建 Rsbuild 的配置文件 `rsbuild.config.ts`，并添加以下内容：
```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
export default defineConfig({
plugins: [],
});
```
## 构建入口 \{#build-entry}
Rsbuild 与 Vite 默认的构建入口不同，Vite 使用 `index.html` 作为默认入口，而 Rsbuild 会自动检测 `src/index.*` 模块，例如 `src/index.ts` 或 `src/index.js`。
从 Vite 迁移到 Rsbuild 时，你可以使用 Rsbuild 提供的 [source.entry](/zh/config/source/entry.md) 来设置构建入口，[html.template](/zh/config/html/template.md) 来设置模板。
以一个新建的 Vite 项目为例，首先删除 `index.html` 中的 `
```
然后添加如下配置即可。
```ts title="rsbuild.config.ts"
export default {
html: {
template: './index.html',
},
source: {
entry: {
index: './src/main.ts',
},
},
};
```
Rsbuild 会在构建时自动注入 `