> ## 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.

# 使用 Nuxt 和 Bun 构建应用

Bun 支持 [Nuxt](https://nuxt.com) 无需额外配置。使用官方 `nuxi` CLI 初始化一个 Nuxt 应用。

```sh terminal icon="terminal" theme={null}
bunx nuxi init my-nuxt-app
```

```txt theme={null}
✔ 你想使用哪个包管理器？
bun
◐ 正在安装依赖...
bun install v1.3.3 (16b4bf34)
 + @nuxt/devtools@0.8.2
 + nuxt@3.7.0
 安装了 785 个包 [2.67s]
✔ 安装完成。
✔ 类型已在 .nuxt 中生成
✨ Nuxt 项目已使用 v3 模板创建。后续步骤：
 › cd my-nuxt-app
 › 使用 bun run dev 启动开发服务器
```

***

要启动开发服务器，在项目根目录下运行 `bun --bun run dev`。这会执行 `package.json` 中 `"dev"` 脚本定义的 `nuxt dev` 命令。

<Note>
  `nuxt` CLI 默认使用 Node.js；传递 `--bun` 标志会强制开发服务器使用 Bun 运行时。
</Note>

```sh terminal icon="terminal" theme={null}
cd my-nuxt-app
bun --bun run dev
```

```txt theme={null}
nuxt dev
Nuxi 3.6.5
Nuxt 3.6.5 with Nitro 2.5.2
  > 本地：    http://localhost:3000/
  > 网络：    http://192.168.0.21:3000/
  > 网络：    http://[fd8a:d31d:481c:4883:1c64:3d90:9f83:d8a2]:3000/

✔ Nuxt DevTools 已启用 v0.8.0（实验性）
ℹ Vite 客户端在 547 毫秒内预热
✔ Nitro 在 244 毫秒内构建完成
```

***

开发服务器启动后，打开 [http://localhost:3000](http://localhost:3000) 查看应用。它会渲染 Nuxt 内置的 `NuxtWelcome` 模板组件。

要开始开发你的应用，将 `app.vue` 中的 `<NuxtWelcome />` 替换为你自己的 UI。

<Frame>
  ![在 localhost 上运行的 Nuxt 演示应用](https://github.com/oven-sh/bun/assets/3084745/2c683ecc-3298-4bb0-b8c0-cf4cfaea1daa)
</Frame>

***

对于生产构建，默认预设与 Bun 兼容，但 [Bun 预设](https://nitro.build/deploy/runtimes/bun) 会生成优化更好的构建。

```ts nuxt.config.ts icon="https://mintcdn.com/span-inc/82N53aP7NFbaCVSl/icons/typescript.svg?fit=max&auto=format&n=82N53aP7NFbaCVSl&q=85&s=787d39d6a7d96d7f9540dc74344eba23" theme={null}
export default defineNuxtConfig({
  nitro: {
    preset: "bun", // [!code ++]
  },
});
```

或者，使用环境变量设置预设：

```sh terminal icon="terminal" theme={null}
NITRO_PRESET=bun bun run build
```

<Note>
  某些包提供 Bun 特定的导出，使用默认预设时 Nitro 无法正确打包。使用 Bun 预设可确保这些包在生产构建中正常工作。
</Note>

构建后，启动服务器：

```sh terminal icon="terminal" theme={null}
bun run ./.output/server/index.mjs
```

***

参考 [Nuxt 网站](https://nuxt.com/docs) 查看完整文档。