如何将配置了构建脚本的Storybook部署到Vercel平台

你当前package.json里配置的"build-storybook": "build-storybook"脚本是符合要求的，按以下步骤配置即可完成部署：

• 先做本地预校验：在项目根目录执行对应包管理器的安装命令（npm install/yarn install/pnpm install），依赖装完后跑npm run build-storybook，确认能正常生成静态产物，默认产物会存放在根目录的storybook-static文件夹，本地构建不报错再走后续平台配置，能避免80%的线上构建问题。
• 进入Vercel控制台导入绑定的Git仓库，进入项目配置页后不要用Vercel自动识别的框架预设，手动修改三个核心配置：
  • 框架预设选择Other，不要选项目本身用的React/Vue等框架，防止Vercel自动匹配错误的构建规则
  • 构建命令栏填写npm run build-storybook，用yarn/pnpm的话对应替换为yarn build-storybook/pnpm build-storybook即可
  • 输出目录栏填写storybook-static，这是Storybook构建默认生成的静态文件目录，不要用Vercel默认填充的dist/public目录
• 其余配置（安装命令、环境变量等）和你部署普通前端项目的规则一致，没有特殊依赖直接留空即可，点击部署按钮等待构建流程跑完就完成首次部署。后续向绑定的Git分支推送代码时，Vercel会自动触发增量构建和部署，不需要手动操作。

常见问题处理 #

• 如果你用的是Storybook 7及以上版本，不需要额外修改build-storybook脚本的参数，当前配置完全可用。
• 如果线上构建报依赖缺失、语法兼容类错误，大概率是Node版本不匹配，可以在项目根目录新建.nvmrc文件，写入你本地开发用的Node大版本号（比如18/20），Vercel会自动读取该文件使用对应版本的Node构建。
• 自定义域名、访问密码、重定向规则这类配置直接在Vercel项目设置页操作即可，不需要修改Storybook本身的代码。

内容的提问来源于stack exchange，提问作者Jithin Zacharia