yyj's blog

书接上文，在解决了类型问题以后，我继续部署工作了，没想到Vercel又来了新的问题：

[Error: Failed to collect configuration for /blog-list] {
  [cause]: Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.
      at 83748 (.next/server/chunks/840.js:1:11234)
      at c (.next/server/webpack-runtime.js:1:143)
      at 63004 (.next/server/app/(blogManage)/blog-list/page.js:2:10285)
      at Function.c (.next/server/webpack-runtime.js:1:143)
}

看错误描述要解决的问题应该是：

构建时需要先生成 Prisma Client，需要添加脚本来自动生成。

但是我突然想到一个新的问题！！我数据库使用的SQLite（当时小项目为了方便没考虑太多），但是Vercel 是无服务器环境，不适合使用文件型数据库，如果想要一劳永逸最好用PostgreSQL。改吧改吧。

1、首先修改`schema.prisma`文件

generator client {
    provider = "prisma-client-js"
    binaryTargets = ["native", "rhel-openssl-3.0.x"]
}

datasource db {
    provider = "postgresql"
    url      = env("DATABASE_URL")
}

2、然后更改项目环境变量DATABASE_URL为本地PostgreSQL数据库

话说，也可以用Docker，但是我本地安装了PostgreSQL就干脆直接上PostgreSQL了。

先创建本地数据库确保改了数据库以后本地能跑起来：

（1）. 找到 psql 工具

PostgreSQL 18 的 psql 通常在:

C:\Program Files\PostgreSQL\18\bin\psql.exe

不过我没有装在C盘，丢D盘去了，所以正常来讲在PowerShell或git bash是识别不了psql命令的，因此要去修改系统环境变量。在path里面加上路径C:\Program Files\PostgreSQL\18\bin (替换你实际安装位置)。

（2）. 创建数据库

法一: 使用命令行

# 先回到项目目录
# 然后运行命令
psql -U postgres -c "CREATE DATABASE yyj_blog;"
# 或者使用完整路径运行
"C:\Program Files\PostgreSQL\18\bin\psql.exe" -U postgres -c "CREATE DATABASE [数据库名称];"

会提示输入密码(你安装 PostgreSQL 时设置的密码)。

法二: 使用pgAdmin(PostgreSQL 自带的图形界面)

打开 pgAdmin (开始菜单搜索 "pgAdmin")
连接到 PostgreSQL 服务器(输入密码)
右键 "Databases" → "Create" → "Database"
名称输入你的项目名称
点击 Save

（3）. 更改本地环境变量

DATABASE_URL="postgresql://postgres:你的实际密码@localhost:5432/你的项目名称?schema=public"

（4）. 运行数据库迁移并启动开发服务器

迁移不成功的话记得检查错误，比如我之前的SQLite迁移数据没删就报错了，所以先删除再迁移

# 我这里要先删除migrations目录
rm -rf prisma/migrations

# 生成 Prisma Client
npx prisma generate

# 创建新的迁移
npx prisma migrate dev

# 启动！
npm run dev

3、添加自动构建脚本

更新 build 脚本确保 Prisma Client 先生成："build": "prisma generate && next build"

添加脚本"postinstall": "prisma generate" ，npm install 后会自动运行

4、准备云数据库

因为部署到Vercel上去了肯定没办法连本地数据库，推荐的免费云数据库有：

Vercel Postgres
Neon
Supabase

我选了Supabase，官网：https://supabase.com/

直接用github账号登录Supabase，然后创建数据库，点击Connect，就能看到连接地址了。

云数据库准备好以后别忘了迁移，不然全是空的，一张表都没有。

DATABASE_URL="你的Supabase连接字符串" npx prisma migrate deploy

5、在 Vercel 添加环境变量：

打开Vervel网站，进入项目控制台，在Setting里面找到Environment Varibles，加入云数据库连接地址和项目所需要的环境变量：

DATABASE_URL=postgresql://...
AUTH_SECRET=生成的密钥
// ...以及其余项目需要的环境变量

6、根目录下加一个vercel.json，确保解决Vercel构建配置问题

{
 "buildCommand": "npm run build",
 "installCommand": "npm install",
 "framework": "nextjs"
}

7、检查prisma相关文件

然而还没完.....刚同步上去又遇到过一个错误，大致意思就是Vercel 部署时缺少 DATABASE_URL 环境变量。

Failed to load config file "/vercel/path0" as a TypeScript/JavaScript module. Error: PrismaConfigEnvError: Missing required environment variable: DATABASE_URL
npm error code 1
npm error path /vercel/path0
npm error command failed
npm error command sh -c prisma generate
npm error A complete log of this run can be found in: /vercel/.npm/_logs/2025-11-19T13_48_43_372Z-debug-0.log

在 Vercel 构建时，prisma.config.ts 文件会被加载，但这个文件需要 DATABASE_URL 环境变量。最好删除 prisma.config.ts (如果有的话）， Prisma 实际上不需要这个配置文件，因为所有配置都已经在 schema.prisma 中了。

好了全部搞完，同步到github，开始自动部署。

未完待续。

相关系列：

Vercel部署踩坑系列2：数据库问题