> ## Documentation Index
> Fetch the complete documentation index at: https://bun.ll1025.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用 Vite 和 Bun 构建前端

<Note>
  你可以将 Vite 与 Bun 一起使用，但许多项目通过切换到 [HTML 导入](/bundler/html-static) 可以获得更快的构建速度和减少数百个依赖。
</Note>

***

Vite 与 Bun 无需额外配置即可工作。从 Vite 的模板之一开始。

```bash terminal icon="terminal" theme={null}
bun create vite my-app
```

```txt theme={null}
✔ 选择一个框架： › React
✔ 选择一个变体： › TypeScript + SWC
项目脚手架创建在 /path/to/my-app...
```

***

然后 `cd` 进入项目目录并安装依赖。

```bash terminal icon="terminal" theme={null}
cd my-app
bun install
```

***

使用 `bunx` 通过 `vite` CLI 启动开发服务器。

`--bun` 标志告诉 Bun 使用 `bun` 而非 `node` 运行 Vite 的 CLI；默认情况下，Bun 会遵循 Vite 的 `#!/usr/bin/env node` [shebang 行](https://en.wikipedia.org/wiki/Shebang_\(Unix\))。

```bash terminal icon="terminal" theme={null}
bunx --bun vite
```

***

为简化此命令，将 `package.json` 中的 `"dev"` 脚本更新为以下内容。

```json package.json icon="file-json" theme={null}
  "scripts": {
    "dev": "vite", // [!code --]
    "dev": "bunx --bun vite", // [!code ++]
    "build": "vite build",
    "serve": "vite preview"
  },
  // ...
```

***

现在你可以使用 `bun run dev` 启动开发服务器。

```bash terminal icon="terminal" theme={null}
bun run dev
```

***

为生产环境构建你的应用。

```sh terminal icon="terminal" theme={null}
bunx --bun vite build
```

***

更多信息，请参见 [Vite 文档](https://vite.dev/guide/)。