PayQrcode 物理合并二合一收款码

而今天要介绍的 PayQrcode 项目，提出了一种全新的思路——通过物理图片合并技术，将微信与支付宝收款码融合为单张图片，实现完全离线的双码兼容识别。这种方案彻底摆脱了对服务器和网络的依赖，让收款码回归最纯粹的工具属性。 PayQrcode 提供了多种灵活的部署方式，无论是零基础用户的一键部署，还是开发者需要的手动配置，都能快速完成部署。本教程将详细介绍部署方案，帮助你轻松搭建自己的二合一收款码生成工具。准备工作部署前请确保满足以下条件：拥有 GitHub 账号（用于代码托管和授权部署平台访问）（可选）Cloudflare 或 Vercel 账号（用于免费托管）了解基本的命令行操作（针对本地开发和手动部署） Cloudflare Pages 手动部署（进阶配置）若需自定义部署参数（如分支选择、环境变量等），可采用手动部署流程：前提条件已将项目仓库 https://github.com/uxiaohan/PayQrcode 复刻（Fork）到自己的 GitHub 账号已登录 Cloudflare 账号部署步骤进入 Cloudflare Pages 控制台登录后，在左侧导航栏选择 "Workers 和 Pages" → "创建应用程序" → "Pages" 连接 GitHub 仓库点击 "连接到 Git"，选择已复刻的 PayQrcode 仓库，指定部署分支（建议 main 或 master）配置构建参数在 "构建设置" 中按以下信息填写（适配项目特性）：项目名称：自定义名称（如 pay-qrcode）构建预设：Vue 构建命令：npm run build（项目打包命令，来自 package.json 的 scripts 字段）输出目录：dist（Vite 构建默认输出目录，对应 vite.config.ts 配置）构建版本：选择 Node.js 18+（兼容项目依赖）启动部署点击 "部署站点"，Cloudflare 会自动执行：克隆代码 → 安装依赖（npm install）→ 执行构建（npm run build）→ 部署 dist 目录文件验证部署部署完成后，通过默认域名访问应用，测试功能是否正常：上传微信 / 支付宝收款码，检查是否能生成合并二维码测试下载功能，确认图片生成无误部署验证与问题排查验证标准访问部署后的域名，页面能正常加载（参考 页面截图）上传收款码后能生成合并图片，且微信 / 支付宝扫码分别跳转对应支付页面常见问题构建失败检查 Node.js 版本是否 ≥18，推荐使用 18.x 或 20.x 查看部署日志，若依赖安装失败，尝试在本地执行以下命令确认依赖兼容性： pnpm install 页面白屏确认 dist 目录是否生成 index.html 及静态资源（js、css 文件夹）自建服务器需配置单页应用路由支持（如 Nginx 的 try_files 配置）域名访问异常 Cloudflare/Vercel 部署需等待 DNS 生效（通常几分钟）自定义域名需完成 DNS 解析配置（参考 Cloudflare 官方文档 或 Vercel 官方文档）通过以上步骤，你可以根据自身需求选择最合适的部署方式，快速搭建 PayQrcode 服务。如需进一步定制功能，可基于本地开发环境进行二次开发。