Next.js在Vercel服务器上静态与动态路由process.env.PWD不一致求助
解决Vercel App Router下静态/动态路由文件路径不一致问题
使用Vercel专属环境变量
VERCEL_PROJECT_ROOT
Vercel提供的VERCEL_PROJECT_ROOT环境变量,在静态生成、动态路由、服务器端渲染等所有环境下都会指向项目根目录,用它拼接文件路径能保证一致性。同时兼容本地开发环境,本地无该变量时用process.cwd()兜底。
示例代码:import fs from 'fs/promises'; import path from 'path'; async function getBlogPost(slug) { const rootDir = process.env.VERCEL_PROJECT_ROOT || process.cwd(); const filePath = path.join(rootDir, 'blog', `${slug}.md`); return await fs.readFile(filePath, 'utf8'); }基于
import.meta.url获取项目根目录(通用方案)
如果不想依赖Vercel的环境变量,可以用Node.js的import.meta.url定位当前文件位置,再向上导航到项目根目录,该方法在本地和Vercel上都能正常工作。需根据你的文件结构调整导航层级(示例假设当前文件在app目录下,需向上跳一级到项目根)。
示例代码:import fs from 'fs/promises'; import path from 'path'; import { fileURLToPath } from 'url'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const projectRoot = path.join(__dirname, '..'); async function getBlogPost(slug) { const filePath = path.join(projectRoot, 'blog', `${slug}.md`); return await fs.readFile(filePath, 'utf8'); }为什么之前的方法失效?
process.env.PWD和process.cwd()的返回值受Vercel运行环境影响:静态路由在构建阶段生成,工作目录为/vercel/path0/;动态路由在服务器运行时处理,工作目录为/var/task/,两者在不同路由类型下不一致,导致路径拼接错误。
内容的提问来源于stack exchange,提问作者Islam Naasani
相关产品推荐
相关产品推荐

