NuxtHub部署nuxt项目就是方便

大家好~我是Pub

最近一直在开发面向海外的应用，基本都是用Nuxt进行全栈开发的。从开发到部署都用了 Nuxthub，我自己用起来觉得非常方便。（我发现掘金好像还没有nuxthub的文章）

前几天Nuxthub也更新到了0.10版本。

如果你是 Nuxt 开发者，在开发面向海外的应用，想开发全栈应用（带数据库、文件上传等），但又不想折腾复杂的后端部署、Docker 或云服务配置，NuxtHub 就是为你准备的。

1. NuxtHub 是什么？

NuxtHub 是一个 Nuxt 模块 （@nuxthub/core），也是一个部署和管理平台。

它的核心理念是 "Zero Configuration"（零配置） 。它将数据库 (SQL) 、文件存储 (Blob) 、键值存储 (KV) 和 服务端缓存 等后端能力，直接集成到了 Nuxt 的运行时中。

简单来说，它让你在写 Nuxt 代码时，可以直接 import 一个数据库对象并开始查询，而无需关心底层的连接、认证或服务器维护。它底层主要利用了 Cloudflare 的边缘计算能力（Workers, D1, R2, KV），让你的应用不仅全栈，而且运行在全球边缘节点上。

2. 有什么方便的？

NuxtHub 最大的卖点就是 开发者体验 (DX) 的极致简化：

开箱即用 ：不需要安装 MySQL/PostgreSQL 软件，不需要配置 S3 存储桶。在本地开发时，NuxtHub 会自动在本地模拟这些服务（使用 SQLite 等技术），数据保存在项目根目录的 .data 文件夹中。
像写前端一样写后端：你不需要学习复杂的后端框架。通过简单的导入语法即可操作数据库。
零配置部署 ：使用 npx nuxthub deploy 命令，系统会自动识别你的配置，在 Cloudflare 上为你创建对应的数据库、存储桶和 KV 空间，并发布应用。
可视化管理 ：直接在 Nuxt DevTools（开发工具栏）里就能看到数据库里的表、查看上传的文件、管理缓存，非常直观。

3. 有什么好处？

全栈一体化：前端和后端逻辑在同一个项目中，共享类型（TypeScript），维护成本极低。
高性能 (Edge Computing)：你的应用不是运行在某个单一地区的服务器上，而是运行在 Cloudflare 的全球边缘网络上，用户访问速度极快。
功能丰富 ：
- NuxtHub Database (SQL): 基于 SQLite (Cloudflare D1)，支持 Drizzle ORM，自动处理数据库迁移。
- NuxtHub Blob: 轻松上传和存储图片、视频 (Cloudflare R2)。
- NuxtHub KV: 高速键值对存储，适合存配置、Session 等。
- NuxtHub Cache: 强大的服务端/API 缓存能力。
无厂商锁定风险：虽然它目前深度集成 Cloudflare，但它是作为一个开源模块设计的，未来有潜力适配更多平台。而且本地开发完全离线可用。

4. 怎么用？

第一步：创建项目（最快上手）

直接使用官方模板初始化：

bash 复制代码

# 初始化一个 NuxtHub 项目
npx nuxi init -t hub my-hub-app
cd my-hub-app
npm install
npm run dev

第二步：在现有项目中使用

安装核心模块：

bash 复制代码

npx nuxi module add @nuxthub/core

修改 nuxt.config.ts 开启你需要的功能：

typescript 复制代码

export default defineNuxtConfig({
  modules: ['@nuxthub/core'],
  hub: {
    db: true,    // 开启 SQL 数据库
    blob: true,  // 开启文件存储
    kv: true,    // 开启键值对存储
    cache: true, // 开启缓存
  }
})

第三步：写代码（示例）

1. 数据库操作 (server/api/todos.ts)

typescript 复制代码

import { db } from 'hub:db'

export default eventHandler(async () => {
  // 直接查询数据库，拥有完整的类型提示
  const todos = await db.query.todos.findMany()
  return todos
})

2. 键值对存储 (KV)

typescript 复制代码

import { kv } from 'hub:kv'

// 存储数据
await kv.set('user:1:settings', { theme: 'dark' })
// 获取数据
const settings = await kv.get('user:1:settings')

3. 文件上传 (Blob)

typescript 复制代码

import { blob } from 'hub:blob'

export default eventHandler(async (event) => {
  // 获取上传的文件
  const form = await readFormData(event)
  const file = form.get('image') as File
  
  // 保存到 Blob 存储
  return await blob.put(file.name, file, {
    addRandomSuffix: true
  })
})

第四步：部署上线

无需去 Cloudflare 后台手动点点点，只需运行：

bash 复制代码

npx nuxthub deploy

它会自动登录、构建、并在云端配置好所有需要的数据库和存储资源。

总结：NuxtHub 是目前 Nuxt 生态中开发全栈应用最现代、最轻量的方式，特别适合个人开发者、独立开发者。

最近写了个开源项目也是用nuxthub开发的。

如果这个项目对你有帮助：

⭐ Star 一下支持作者
🐛 发现 Bug 欢迎提 Issue
📢 分享给有需要的朋友
💬 有问题可以评论区交流

🔗 GitHub: github.com/PBHAHAHA/Nu...

也可以加我微信交流：w314709923x

如果觉得有帮助，别忘了点赞 👍 收藏 ⭐ 关注 ➕ 三连哦～