使用 Nuxt 和 Bun 构建应用

Bun 无需额外配置即可支持 Nuxt。使用官方的 create-nuxt CLI 初始化 Nuxt 应用。

terminal

bun create nuxt@latest my-nuxt-app

Text

┌  Welcome to Nuxt!
│
◇  Templates loaded
│
◇  Which template would you like to use?
│  minimal – Minimal starter with a single app.vue.
│
◇  Creating project in my-nuxt-app
│
◇  Downloaded minimal template
│
◇  Which package manager would you like to use?
│  bun
│
◇  Initialize git repository?
│  Yes
│
◇  Dependencies installed
│
◇  Git repository initialized
│
◇  Would you like to browse and install modules?
│  No
│
└  ✨ Nuxt project has been created with the minimal template.

╭── 👉 Next steps ─────╮
│                      │
│   › cd my-nuxt-app   │
│   › bun run dev      │
│                      │
╰──────────────────────╯

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

terminal

cd my-nuxt-app
bun --bun run dev

Text

$ nuxt dev
│
●  Nuxt 4.5.2 (with Nitro 2.13.4, Vite 8.2.1 and Vue 3.5.41)

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v3.4.1)

✔ Vite client built in 95ms
✔ Vite server built in 33ms
[nitro] ✔ Nuxt Nitro server built in 948ms
ℹ Vite server warmed up in 3ms
ℹ Vite client warmed up in 9ms

开发服务器启动后，打开 http://localhost:3000 即可查看应用。该应用会渲染 Nuxt 内置的 NuxtWelcome 模板组件。

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

对于生产环境构建，默认预设与 Bun 兼容，但 Bun 预设可以生成经过更好优化的构建结果。

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    preset: "bun", // [!code ++]
  },
});

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

terminal

NITRO_PRESET=bun bun run build

构建完成后，启动服务器：

terminal

bun run ./.output/server/index.mjs

完整文档请参阅 Nuxt 官网。