⚡

BunNuxt开发 "BunNuxt"

这个技能专注于使用 Bun JavaScript 运行时来开发和运行 Nuxt 3 应用程序。它包括项目初始化、依赖安装、开发服务器、构建、预览和部署。涉及配置 Nuxt 项目以利用 Bun 的性能优势，使用 Bun APIs 如数据库操作和文件处理，以及部署到生产环境。关键词：Bun, Nuxt, Vue, 前端开发, 服务器端渲染, 部署, DevOps, 快速开发, 性能优化。

前端开发 0 次安装 0 次浏览 更新于 3/8/2026

名称: “Bun Nuxt” 描述: 当使用 Bun 运行时运行 Nuxt 3、使用 Bun 构建 Vue/Nuxt 应用或配置 Nuxt 项目以在开发和生产中使用 Bun 时使用。

Bun Nuxt

使用 Bun 运行 Nuxt 3 应用程序以加速开发。

快速开始

# 创建新的 Nuxt 项目
bunx nuxi@latest init my-app
cd my-app

# 安装依赖
bun install

# 开发
bun run dev

# 构建
bun run build

# 预览生产环境
bun run preview

项目设置

package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^4.0.0",
    "vue": "^3.5.0"
  }
}

使用 Bun 运行时

{
  "scripts": {
    "dev": "bun --bun nuxt dev",
    "build": "bun --bun nuxt build",
    "preview": "bun --bun .output/server/index.mjs"
  }
}

配置

nuxt.config.ts

export default defineNuxtConfig({
  // 启用 SSR
  ssr: true,

  // Nitro 配置
  nitro: {
    // 使用 Bun 预设
    preset: "bun",

    // 外部包
    externals: {
      external: ["bun:sqlite"],
    },
  },

  // 开发
  devServer: {
    port: 3000,
  },

  // 模块
  modules: ["@nuxt/ui", "@pinia/nuxt"],
});

使用 Bun APIs

服务器路由

// server/api/users.ts
import { Database } from "bun:sqlite";

export default defineEventHandler(async (event) => {
  const db = new Database("data.sqlite");
  const users = db.query("SELECT * FROM users").all();
  db.close();

  return users;
});

服务器中间件

// server/middleware/auth.ts
export default defineEventHandler(async (event) => {
  const token = getHeader(event, "Authorization");

  if (!token && event.path.startsWith("/api/protected")) {
    throw createError({
      statusCode: 401,
      message: "未授权",
    });
  }
});

文件操作

// server/api/files/[name].ts
export default defineEventHandler(async (event) => {
  const name = getRouterParam(event, "name");
  const file = Bun.file(`./data/${name}`);

  if (!(await file.exists())) {
    throw createError({
      statusCode: 404,
      message: "文件未找到",
    });
  }

  return file.text();
});

组合式 API

使用服务器数据的 useFetch

<script setup lang="ts">
// 从 server/api/users.ts 获取
const { data: users, pending, error } = await useFetch("/api/users");
</script>

<template>
  <div v-if="pending">加载中...</div>
  <div v-else-if="error">错误: {{ error.message }}</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

仅服务器的组合式 API

// composables/useDatabase.ts
export const useDatabase = () => {
  // 仅在服务器上运行
  if (process.server) {
    const { Database } = require("bun:sqlite");
    return new Database("data.sqlite");
  }
  return null;
};

服务器工具

H3 事件处理

// server/api/users.post.ts
export default defineEventHandler(async (event) => {
  // 读取请求体
  const body = await readBody(event);

  // 获取查询参数
  const query = getQuery(event);

  // 获取请求头
  const auth = getHeader(event, "Authorization");

  // 获取 Cookie
  const session = getCookie(event, "session");

  // 设置 Cookie
  setCookie(event, "visited", "true", {
    httpOnly: true,
    maxAge: 60 * 60 * 24,
  });

  return { success: true };
});

数据库工具

// server/utils/db.ts
import { Database } from "bun:sqlite";

let db: Database | null = null;

export function getDb() {
  if (!db) {
    db = new Database("data.sqlite");
    db.run(`
      CREATE TABLE IF NOT EXISTS users (
        id INTEGER PRIMARY KEY,
        name TEXT NOT NULL
      )
    `);
  }
  return db;
}

// server/api/users.ts
export default defineEventHandler(() => {
  const db = getDb();
  return db.query("SELECT * FROM users").all();
});

Nitro 功能

服务器插件

// server/plugins/database.ts
export default defineNitroPlugin((nitroApp) => {
  // 在启动时初始化
  console.log("数据库已初始化");

  // 在关闭时清理
  nitroApp.hooks.hook("close", () => {
    console.log("关闭数据库");
  });
});

定时任务

// server/tasks/cleanup.ts
export default defineTask({
  meta: {
    name: "cleanup",
    description: "清理旧数据",
  },
  run() {
    const db = getDb();
    db.run("DELETE FROM logs WHERE created_at < ?", [
      Date.now() - 7 * 24 * 60 * 60 * 1000,
    ]);
    return { result: "已清理" };
  },
});

部署

为 Bun 构建

# 使用 Bun 预设构建
NITRO_PRESET=bun bun run build

# 运行生产服务器
bun .output/server/index.mjs

Docker

FROM oven/bun:1 AS builder

WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile

COPY . .
RUN bun run build

FROM oven/bun:1

WORKDIR /app
COPY --from=builder /app/.output /app/.output

EXPOSE 3000

CMD ["bun", ".output/server/index.mjs"]

环境变量

# .env
NUXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=./data.sqlite

// 在代码中访问
const config = useRuntimeConfig();
console.log(config.public.apiUrl);
console.log(config.databaseUrl); // 仅服务器

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    databaseUrl: "",
    public: {
      apiUrl: "",
    },
  },
});

常见错误

错误 原因 修复方法
Cannot find bun:sqlite 错误的预设 设置 nitro.preset: "bun"
Module parse failed 构建问题 清除 .nuxt 并重新构建
Hydration mismatch 服务器/客户端差异 检查异步数据
EADDRINUSE 端口被占用 更改端口或终止进程

何时加载参考文档

加载 references/nitro.md 当：

  • 高级 Nitro 配置
  • 存储驱动
  • 缓存处理程序

加载 references/deployment.md 当：

  • 边缘部署
  • Cloudflare Workers
  • Vercel/Netlify