备注

① 以下内容只是为了弄清楚 Vercel中构建项目时拉取Vercel Blob中的文件 的这个流程，所以为了演示，使用到的是 默默导航 这个项目。

② 其实就是一些网站链接，以及网站对应logo，本身也不是什么隐私的文件。所以，再次说明，这个只是为了探讨这个方法，顺便拿了这个来做演示。

③ 如果你也想使用 默默导航 来部署一个你自己的导航网站的，大可不必如此。你可以直接把momo-nav.json等文件直接上传到你的github仓库。

④ 而且这样搞有个问题就是，后续新增链接，需要上传到 Blob 中。但是上传完了，vercel并不会自动重新部署。相比于直接在仓库里维护，这个流程要复杂一些，且需要手动触发部署。简直费力不讨好。所以再声明一下，这个方法只是为了探讨这个流程，而不是为了实际使用。

场景本质

如果你用的是 GitHub 自动部署，Vercel 构建时拿到的只有 Git 仓库里的文件。

以 默默导航 为例：被 .gitignore 忽略的 momo-nav.json 和 other-favicon/，默认不会出现在部署里。

而我这个项目里，我需要前端是直接读取momo-nav.json文件的，而这个json文件中又指定了其中的一些图标文件来自于other-favicon/*这个文件夹中。所以这些资源在vercel构建时，必须真实存在。

最终流程

  1. 本地维护 momo-nav.json 和 other-favicon/。
  2. 用写好的脚本将所需要的文件，一键上传到 vercel Blob 的 momo-nav/ 前缀。
  3. Vercel 构建时执行下载脚本，把 Blob 文件拉回到构建目录。
  4. 页面线上访问的是部署产物中的静态文件，不是实时 Blob 请求。

第一步：创建 Blob

在Vercel后台，左侧找到Storage，然后按照页面进行创建一个，选择Public的即可。

按照下图可以查看到你的Blob的Token：

查看vercel-blob的Token

查看vercel-blob的Token

按照下图可以查看到你的Blob的链接，第三步中“Reset Credentials”是重置你的Blob的Token。

查看vercel-blob的链接以及重置Token的方法

查看vercel-blob的链接以及重置Token的方法

我在 Blob（Public）里使用这个结构：

1
2
3
4
5
6
7

momo-nav/
  momo-nav.json
  other-favicon/
    web1.svg
    web2.ico
    web3.png
    ...

第二步：本地一键上传脚本

我在项目里放了一个scripts/upload-blob-assets.ps1脚本：

使用方式：

1
2
3

cd 你的项目目录\momo-nav
$env:BLOB_READ_WRITE_TOKEN="vercel_blob_rw_xxx你的新token"
.\scripts\upload-blob-assets.ps1

这个环境变量只在当前终端窗口有效，关掉窗口就没了（最安全）。

如果你想长期保存（不推荐明文），可以用：

1

setx BLOB_READ_WRITE_TOKEN "vercel_blob_rw_xxx你的新token"

当然，如果你是用 setx 设置 token，记得开一个新终端再执行脚本。

可选：

1

.\scripts\upload-blob-assets.ps1 -Prefix "xxxx"

关于 -Prefix

.\scripts\upload-blob-assets.ps1 -Prefix "xxxx" 只影响“上传到Blob的路径前缀”。

fetch-blob-assets.mjs 拉取哪里，取决于 MOMO_BLOB_BASE_URL。例如你配置成 …/momo-nav，它就只从 momo-nav 拉；想从 xxxx 拉，就把环境变量改成 …/xxxx。

第三步：构建时下载脚本

我还放了一个scripts/fetch-blob-assets.mjs脚本：

这个脚本做了三件事：

  1. 从 Blob 下载 momo-nav.json。
  2. 解析 JSON，收集被引用的图标文件路径。
  3. 把这些图标下载到本地构建目录。

第四步：配置 vercel.json

vercel.json 里把构建命令改为下载脚本：

1
2
3
4
5
6

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": null,
  "buildCommand": "node scripts/fetch-blob-assets.mjs",
  "outputDirectory": "."
}

第五步：部署到 Vercel

整活儿玩法：momo-nav部署到vercel时的设置

整活儿玩法：momo-nav部署到vercel时的设置

在 Vercel 项目里加：

1

MOMO_BLOB_BASE_URL=https://<你的public blob域名>/momo-nav

另外要知道这点：

  • Connect Project 会帮你注入 Blob token（如 BLOB_READ_WRITE_TOKEN）。
  • 但它不会自动创建你自定义的 MOMO_BLOB_BASE_URL。

所以 MOMO_BLOB_BASE_URL 仍要手动配置。

费用和流量怎么理解

关键结论：

  1. 运行时读 Blob：用户每次访问都会产生 Blob 请求/流量。
  2. 构建时读 Blob：只在部署时产生少量 Blob 用量，日常访问不再走 Blob。

我这次项目实测体积：

  • momo-nav.json：约 40 KB
  • other-favicon/：约 231 KB（41 个文件）
  • 合计约 272 KB

这种体量即使按“每次部署都拉一遍”来算，通常也很难碰到免费额度上限。
（具体免费额度和计费规则会变化，以 Vercel 官方文档为准）

一句话总结

这套方案的本质是：把 Blob 当“部署时的数据源”，而不是“运行时的数据源”。

这样既保留了本地私有资源不进 Git，又能让线上访问体验和“文件直接在仓库里”几乎一致。