> ## Documentation Index
> Fetch the complete documentation index at: https://bun.zhcndoc.com/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={"theme":{"light":"github-light","dark":"dracula"}}
bun create vite my-app
```

```txt theme={"theme":{"light":"github-light","dark":"dracula"}}
✔ 选择一个框架：› React
✔ 选择一个变体：› TypeScript + SWC
正在在 /path/to/my-app/ 脚手架项目...
```

***

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

```bash terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
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={"theme":{"light":"github-light","dark":"dracula"}}
bunx --bun vite
```

***

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

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

***

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

```bash terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bun run dev
```

***

以下命令将为生产环境构建你的应用。

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bunx --bun vite build
```

***

这是一份精简的指南，帮助你快速上手 Vite + Bun。更多信息，请参阅 [Vite 文档](https://vite.dev/guide/)。