如何将Vercel系统环境变量传递到Sanity项目的代码中使用

实现步骤 #

Sanity 只会将带 SANITY_STUDIO_ 前缀的环境变量打包到前端产物中，Vercel 自带的 VERCEL_GIT_COMMIT_REF 变量无法直接被识别，按照以下两种方法任选其一操作即可：

方法1：修改Vercel构建命令（推荐，无需修改项目代码） #

进入Vercel项目后台的「设置」-「构建与部署」页面，将原有构建命令替换为如下格式即可：

SANITY_STUDIO_VERCEL_GIT_COMMIT_REF=$VERCEL_GIT_COMMIT_REF npm run build

如果你用的是yarn/pnpm，把npm run build替换为对应包管理器的构建命令即可。

方法2：项目内新增前置构建脚本 #

如果不想修改Vercel平台配置，可以在项目内加一段自动注入变量的脚本：

1. 在项目根目录新建prebuild.js文件，写入以下内容：

const fs = require('fs')
// 自动将Vercel环境变量写入到.env文件供Sanity读取
fs.writeFileSync(
  '.env',
  `SANITY_STUDIO_VERCEL_GIT_COMMIT_REF=${process.env.VERCEL_GIT_COMMIT_REF}\n`,
  { flag: 'a' }
)

2. 打开package.json，在scripts字段中新增prebuild指令：

{
  "scripts": {
    "prebuild": "node prebuild.js",
    "build": "sanity build"
  }
}

prebuild是npm/yarn/pnpm默认的前置钩子，构建时会自动执行，无需额外调整构建命令。

调用方式 #

打包完成后，你可以直接在前端代码中读取该变量，实现你要的分支名展示效果：

• 如果你用的是Vite等ESM打包工具：import.meta.env.SANITY_STUDIO_VERCEL_GIT_COMMIT_REF
• 如果你用的是Webpack等CommonJS打包工具：process.env.SANITY_STUDIO_VERCEL_GIT_COMMIT_REF

注意：不要在Vercel控制台的环境变量管理页手动添加SANITY_STUDIO_VERCEL_GIT_COMMIT_REF变量，手动填写的固定值会覆盖动态赋值的内容。

内容的提问来源于stack exchange，提问作者Hariharan K