awesome-gpt-image-2本地开发环境搭建：vite dev与本地API Mock完整教程

awesome-gpt-image-2本地开发环境搭建：vite dev与本地API Mock完整教程

【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库，530+ 个案例逆向工程，20+ 套工业级模板，并提炼出Skills，持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2

awesome-gpt-image-2 是一个 GPT-Image2 工业级提示词引擎与模板库（530+ 案例逆向工程、20+ 套工业级模板），自带一个 React + Vite 可视化网站。想参与开发或二次改造？本文带你从零完成本地开发环境搭建：用vite dev跑起站点，并通过内置的本地 API Mock 插件，在无云服务的情况下也能调试完整的社区支付链路。

一、环境准备：安装 Node.js 并克隆仓库

先确认 Node.js 版本。项目使用 vite 7 作为构建工具，官方要求 Node.js 20.19+ 或 22.12+，直接上 Node.js 22 LTS 最省心。

node -v # 查看当前版本 npm -v

克隆仓库：

git clone https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2 cd awesome-gpt-image-2

安装依赖：

npm install

依赖不多，核心是react 19、vite 7、@supabase/supabase-js和alipay-sdk，全部声明在 package.json 中。

二、一条命令启动：npm run dev 背后发生了什么

在仓库根目录执行：

npm run dev

浏览器打开http://127.0.0.1:5173，即可看到完整的 GPT-Image2 案例画廊。这一条命令其实串联了三件事，理解它们能帮你避开大多数"起不来服务"的坑：

几个关键配置在 vite.config.js 里，只有十几行：

• plugins: [localVercelApi(), react()]—— 本地 API Mock 插件在前，React 插件在后；
• publicDir: 'data'—— 把data/目录整体作为静态资源根，这就是画廊里的案例图（data/images/case*.jpg）和分类封面能直接访问的原因，也意味着本地改图片无需任何构建步骤。

数据生成脚本分别是 scripts/generate-site-data.mjs 和 scripts/generate-style-skill.mjs。如果启动时报错提示缺少输入数据，先手动跑一次npm run generate:site-data，通常是因为data/下的索引文件未生成。

三、本地 API Mock 核心机制：把 Vercel Function 装进 vite dev

线上站点部署在 Vercel 上，API 是 Serverless Function；本地开发则不需要任何云平台。核心实现在 scripts/vite-local-api.mjs，它通过 Vite 的configureServer钩子注册了一个中间件：

1. 路由表匹配：维护一张路径 → 模块的映射表，覆盖/api/community/config、/api/community/status、/api/community/alipay/checkout、/api/admin/community/orders等 12 条路由，命中后动态import对应的线上同款处理函数（如 api/community/config.js），本地跑的就是线上那一份代码，行为一致性好；
2. 模拟 Vercel 响应对象：给res补上status()、json()、redirect()等方法，让 API 代码无需为本地环境写分支；
3. 无云回退（Mock 兜底）：检测不到VITE_SUPABASE_URL+SUPABASE_SERVICE_ROLE_KEY时，/api/community/status直接返回{ localPreview: true, paymentEnabled: false, ... }的占位数据——也就是说：不配置任何密钥，页面也能正常打开、社区页优雅降级，这正是新手体验本项目的推荐姿势。

想接入真实的 Supabase 数据做完整调试，在项目根目录创建.env.local（该文件不要提交到仓库）：

VITE_SUPABASE_URL= VITE_SUPABASE_ANON_KEY= SUPABASE_SERVICE_ROLE_KEY=

注意：SUPABASE_SERVICE_ROLE_KEY是服务端密钥，仅限本地使用。若要用本地地址调试登录回跳，记得在 Supabase 控制台的 Auth Redirect URLs 里加上http://127.0.0.1:5173。

四、可选：本地支付宝网站支付沙箱

除了 Mock 兜底，项目还内置了独立的支付宝沙箱联调服务（scripts/alipay-webpay-sandbox-server.mjs），它会在127.0.0.1:4174起一个纯本地的下单 → 收银台 → 服务端查单闭环，不产生真实扣款、不写线上数据库：

# 需先配置支付宝沙箱应用变量（与 docs/alipay-web-payment.md 中的清单一致） ALIPAY_APP_ID=... ALIPAY_PRIVATE_KEY=... npm run dev:alipay-sandbox

• 端口可通过ALIPAY_SANDBOX_PORT覆盖，默认4174；
• 沙箱固定金额9.90 元（990分，CNY），订单只在内存中保存；
• 回跳结果页不信任 URL 参数，一律走服务端alipay.trade.query查单确认。

如果你只关注画廊展示与前端 UI 开发，这一步可以完全跳过——没有沙箱密钥时，Mock 兜底已经能让页面正常工作。

五、构建验证与单元测试

本地跑通后，建议再验证一下生产构建与测试：

npm run build # prebuild 自动先执行数据生成，产物输出到 dist/ npm run preview # 本地预览生产构建 npm test # 运行 node --test api/_lib/*.test.js（支付宝、社区等核心库单测）

常见问题速查

• 端口被占用 / 想换端口：npm run dev -- --port 3000即可，Vite 原生支持；
• 社区页显示"本地预览"状态：属于预期行为，说明未配置 Supabase 服务端变量，Mock 兜底已生效；
• 案例图片 404：检查data/目录是否完整（publicDir指向它），必要时重新npm run generate:site-data；
• API 改动不生效：本地 API 与线上共用api/目录下的同一批函数，修改后热更新会重新加载对应模块，无需重启 dev server。

小结

至此，vite dev站点 + 本地 API Mock 的开发环境就搭建完成了。更多接口清单与订单状态机细节，可参考 docs/paid-community.md；想深入提示词模板与风格库，入口在 data/style-library.json 与 agents/skills/gpt-image-2-style-library/SKILL.md。

【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库，530+ 个案例逆向工程，20+ 套工业级模板，并提炼出Skills，持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2