如何将 Prisma ORM 与 Nuxt 结合使用
本指南解释了如何设置 Nuxt 应用程序，配置 Prisma Postgres 使用 Prisma Nuxt 模块，并将项目部署到 Vercel 进行生产部署。
你将学到什么
- 如何使用 Prisma Nuxt 模块设置 Nuxt 项目。
- 如何在 Nuxt 应用程序中使用 Prisma Nuxt 模块配置和使用 Prisma Postgres。
- 如何将项目部署到 Vercel。
先决条件
要遵循本指南，请确保你已具备以下条件
- Node.js 版本：Prisma 6 所需的 兼容 Node.js 版本。
- 账户
- Git 和 Vercel 部署的基础知识（有帮助但非必需）。
1. 创建新的 Nuxt 项目并设置 Prisma Nuxt 模块
-
初始化 新的 Nuxt 项目，选择
npm作为包管理器并初始化 gitnpm create nuxt hello-world注意我们推荐使用
npm，因为它与@prisma/nuxt模块的兼容性最稳定。 -
进入项目目录并安装
@prisma/nuxt模块cd hello-world
npm i @prisma/nuxt -
安装 Prisma Accelerate 客户端扩展，因为使用 Prisma Postgres 需要它
npm i @prisma/extension-accelerate -
将
@prisma/nuxt模块添加到nuxt.config.ts文件中，并进行以下配置// https://nuxtjs.org.cn/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-11-01",
modules: ["@prisma/nuxt"],
experimental: {
componentIslands: true,
},
devtools: { enabled: true },
});
2. 通过本地运行开发服务器设置 Prisma ORM
在配置好带有 Prisma 模块的 Nuxt 项目后，下一步是设置 Prisma ORM。此过程通过启动开发服务器开始，它会自动将 Prisma 配置为使用 SQLite 数据库。
运行以下命令启动开发服务器
npm run dev
运行此命令后，系统将提示你使用 Prisma Migrate 运行数据库迁移
? Do you want to migrate database changes to your database? › (Y/n)
按键盘上的 Y 键确认你要迁移数据库并创建初始表。
一旦设置流程终止，它将
- 安装了 Prisma CLI。
- 使用 SQLite 数据库初始化了 Prisma 项目。
- 在
schema.prisma文件中创建了示例User和Post模型prisma/schema.prisma// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User @relation(fields: [authorId], references: [id])
authorId Int
} - 从上一步骤为
User和Post模型创建了数据库表。注意如果不存在
migrations文件夹，则模块首次启动时数据库会自动迁移。之后，你需要手动在 CLI 中运行npx prisma migrate dev来应用任何模式更改。手动运行npx prisma migrate dev命令可以更轻松、更安全地管理迁移，也可以解决任何与迁移相关的错误。 - 安装并生成了 Prisma Client，它使你能够查询数据库。
- 安装了 Prisma Studio。
Prisma 设置完成后，开发服务器应在 https://localhost:3000 上启动。
接下来，停止服务器，因为我们需要进行一些代码更改。
4. 更新应用程序代码
配置 Prisma 后，下一步是更新应用程序代码以从数据库中获取和显示数据。
-
在项目的根目录中，创建一个名为
components的文件夹。 -
在
components文件夹中，创建一个名为User.server.vue的文件。这个服务器组件将从数据库中获取并显示第一个用户的名称components/User.server.vue<script setup>
import { withAccelerate } from "@prisma/extension-accelerate";
const prisma = usePrismaClient().$extends(withAccelerate());
const user = await prisma.user.findFirst();
</script>
<template>
<p>{{ user?.name ?? "No user has been added yet." }}</p>
</template>注意我们使用
withAccelerate()扩展方法扩展了usePrismaClient()可组合函数，以确保与 Prisma Postgres 兼容。此扩展还将允许你缓存查询。 -
修改根目录中的
app.vue文件，使用 Nuxt Islands 包含新的服务器组件app.vue<template>
<div>
<NuxtIsland name="User"></NuxtIsland>
</div>
</template> -
再次运行以下命令启动开发服务器
npm run dev -
通过在浏览器中打开你的应用程序
https://localhost:3000来验证应用程序代码是否正常工作。
由于数据库中还没有用户，应用程序将显示No user has been added yet.当用户添加到数据库时，此消息将动态更新。
通过完成这些步骤，你的应用程序现在能够从 Prisma 数据库获取数据并在前端渲染。
5. 创建 Prisma Postgres 实例
要存储你的应用程序数据，你将使用 Prisma Data Platform 创建一个 Prisma Postgres 数据库实例。
按照以下步骤创建你的 Prisma Postgres 数据库
- 登录到并打开控制台。
- 在你选择的工作区中，点击 New project 按钮。
- 在 Name 字段中键入你的项目名称，例如 hello-ppg。
- 在 Prisma Postgres 部分，点击 Get started 按钮。
- 在 Region 下拉菜单中，选择最接近你当前位置的区域，例如 US East (N. Virginia)。
- 点击 Create project 按钮。
此时，你将被重定向到 Database 页面，你需要在那里等待几秒钟，直到数据库的状态从 PROVISIONING 变为 CONNECTED。
一旦出现绿色的 CONNECTED 标签，你的数据库就可以使用了！
然后，在 Set up database access 部分找到你的数据库凭据，复制 DATABASE_URL 环境变量。
DATABASE_URL=<your-database-url>
DATABASE_URL 环境变量将在下一步中需要。
6. 在 Nuxt 应用中设置 Prisma Postgres
现在 Prisma Postgres 实例已准备就绪，更新你的 Nuxt 应用程序以使用此数据库
-
更新
.env文件，将现有的DATABASE_URL值替换为你之前复制的值。它将类似于这样.envDATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=PRISMA_POSTGRES_API_KEY" -
修改
schema.prisma文件，更改位于prisma文件夹中的schema.prisma文件的datasource块中的数据库提供者prisma/schema.prismadatasource db {
provider = "postgresql"
url = env("DATABASE_URL")
} -
删除 SQLite 数据库文件（
dev.db和dev.db-journal）以及migrations文件夹，所有这些文件都位于prisma目录中。这会清理现有的 SQLite 设置，并准备你的项目迁移到 PostgreSQL。 -
通过运行
prisma migrate命令手动为 Postgres 数据库创建新的迁移npx prisma migrate dev --name init -
再次启动开发服务器
npm run dev -
打开 Nuxt DevTools（按 Shift+Option+ D）并点击左侧边栏中的 Prisma 标志以打开 Prisma Studio。然后通过为
name和email字段指定值来添加新的User记录。 -
通过在
https://localhost:3000刷新你的应用程序来验证应用程序中的数据。页面应显示你在 Prisma Studio 中添加的用户的名称。例如，如果你添加了一个名为Jon的用户，应用程序将在浏览器中显示Jon。
恭喜，你的 Nuxt 应用现在已与 Prisma Postgres 完全集成！
7. 部署到 Vercel
按照以下步骤将你的 Nuxt 应用程序与 Prisma Postgres 集成部署到 Vercel
- 确保你的项目已进行版本控制并推送到 GitHub 仓库。如果你还没有仓库，请在 GitHub 上创建一个。仓库准备好后，运行以下命令
git add .
git commit -m "Initial commit with Prisma Postgres integration"
git branch -M main
git remote add origin https://github.com/<your-username>/<repository-name>.git
git push -u origin main注意将
<your-username>和<repository-name>替换为你的 GitHub 用户名和仓库名称。 - 登录到 Vercel 并导航到你的 仪表板。
- 创建一个新项目。遵循 Vercel 的 导入现有项目 指南，但在 第 3 步 停止，你将在点击 Deploy 之前配置环境变量。
- 配置
DATABASE_URL环境变量- 展开 Environment variables 部分。
- 添加
DATABASE_URL环境变量- 键:
DATABASE_URL - 值: 粘贴你的 Prisma Postgres 连接 URL，例如从你的 Nuxt 项目中的
.env文件复制。
警告在没有设置
DATABASE_URL变量的情况下不要部署。如果应用程序无法连接到数据库，你的部署将失败。 - 键:
- 点击 Deploy 按钮。Vercel 将构建你的项目并将其部署到实时 URL。
- 打开 Vercel 提供的实时 URL 并验证你的应用程序是否正常工作
- 如果你在 Prisma Studio 中添加了用户，他们的名字应该会出现在实时网站上。
- 如果不存在用户，应用程序将显示
No user has been added yet.
- 添加或管理数据
- 通过 Prisma Data Platform 或本地实例打开 Prisma Studio。
- 在数据库中添加或更新用户数据。
- 刷新你的实时网站以确认更改。
恭喜！你的集成 Prisma Postgres 的 Nuxt 应用程序现在已在 Vercel 上线并全面运行。
注意事项
本指南帮助你开始使用带有 Nuxt 模块的 Prisma Postgres。由于 Nuxt 模块正在积极发展中，它不涵盖 Prisma 的所有功能或支持所有边缘情况。对于更高级的功能或边缘部署，请考虑直接使用 Prisma。
与 Prisma 保持联系
通过以下方式与 Prisma 保持联系，继续你的 Prisma 之旅 我们的活跃社区。保持信息更新，参与其中，并与其他开发者协作
- 在 X 上关注我们 获取公告、直播活动和有用技巧。
- 加入我们的 Discord 提问、与社区交流，并通过对话获得积极支持。
- 在 YouTube 上订阅 获取教程、演示和直播。
- 在 GitHub 上参与 通过为仓库加星、报告问题或为问题贡献代码。