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-2awesome-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 案例画廊。这一条命令其实串联了三件事理解它们能帮你避开大多数起不来服务的坑步骤脚本作用1️⃣ 前置生成predev钩子自动执行generate:site-data与generate:style-skill从源数据生成data/cases.json与data/style-library.json2️⃣ 启动 Dev Serverdev即vite在 5173 端口启动热更新开发服务器3️⃣ 挂载本地 APIlocalVercelApi插件拦截/api/community/*请求在本地模拟 Vercel Function 行为几个关键配置在 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钩子注册了一个中间件路由表匹配维护一张路径 → 模块的映射表覆盖/api/community/config、/api/community/status、/api/community/alipay/checkout、/api/admin/community/orders等 12 条路由命中后动态import对应的线上同款处理函数如 api/community/config.js本地跑的就是线上那一份代码行为一致性好模拟 Vercel 响应对象给res补上status()、json()、redirect()等方法让 API 代码无需为本地环境写分支无云回退Mock 兜底检测不到VITE_SUPABASE_URLSUPABASE_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-dataAPI 改动不生效本地 API 与线上共用api/目录下的同一批函数修改后热更新会重新加载对应模块无需重启 dev server。小结目标命令快速本地体验零配置npm install npm run dev接真实 Supabase 调试.env.local填入三个变量后npm run dev支付宝支付链路联调npm run dev:alipay-sandbox验证生产构建npm run build npm run preview至此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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考