PayQrcode 物理合并二合一收款码

而今天要介绍的 PayQrcode 项目，提出了一种全新的思路——通过物理图片合并技术，将微信与支付宝收款码融合为单张图片，实现完全离线的双码兼容识别。这种方案彻底摆脱了对服务器和网络的依赖，让收款码回归最纯粹的工具属性。

PayQrcode 提供了多种灵活的部署方式，无论是零基础用户的一键部署，还是开发者需要的手动配置，都能快速完成部署。本教程将详细介绍部署方案，帮助你轻松搭建自己的二合一收款码生成工具。

准备工作

部署前请确保满足以下条件：

• 拥有 GitHub 账号（用于代码托管和授权部署平台访问）

• （可选）Cloudflare 或 Vercel 账号（用于免费托管）

• 了解基本的命令行操作（针对本地开发和手动部署）

Cloudflare Pages 手动部署（进阶配置）

若需自定义部署参数（如分支选择、环境变量等），可采用手动部署流程：

前提条件

• 已将项目仓库 https://github.com/uxiaohan/PayQrcode 复刻（Fork）到自己的 GitHub 账号

• 已登录 Cloudflare 账号

部署步骤

1. 进入 Cloudflare Pages 控制台
   登录后，在左侧导航栏选择 "Workers 和 Pages" → "创建应用程序" → "Pages"

2. 连接 GitHub 仓库
   点击 "连接到 Git"，选择已复刻的 PayQrcode 仓库，指定部署分支（建议 main 或 master）

3. 配置构建参数
   在 "构建设置" 中按以下信息填写（适配项目特性）：

   • 项目名称：自定义名称（如 pay-qrcode）

   • 构建预设：Vue

   • 构建命令：npm run build（项目打包命令，来自 package.json 的 scripts 字段）

   • 输出目录：dist（Vite 构建默认输出目录，对应 vite.config.ts 配置）

   • 构建版本：选择 Node.js 18+（兼容项目依赖）

4. 启动部署
   点击 "部署站点"，Cloudflare 会自动执行：

   • 克隆代码 → 安装依赖（npm install）→ 执行构建（npm run build）→ 部署 dist 目录文件

5. 验证部署
   部署完成后，通过默认域名访问应用，测试功能是否正常：

   • 上传微信 / 支付宝收款码，检查是否能生成合并二维码

   • 测试下载功能，确认图片生成无误

部署验证与问题排查

验证标准

• 访问部署后的域名，页面能正常加载（参考 页面截图）

• 上传收款码后能生成合并图片，且微信 / 支付宝扫码分别跳转对应支付页面

常见问题

构建失败

• 检查 Node.js 版本是否 ≥18，推荐使用 18.x 或 20.x

• 查看部署日志，若依赖安装失败，尝试在本地执行以下命令确认依赖兼容性：

  纯文本

  pnpm install

页面白屏

• 确认 dist 目录是否生成 index.html 及静态资源（js、css 文件夹）

• 自建服务器需配置单页应用路由支持（如 Nginx 的 try_files 配置）

域名访问异常

• Cloudflare/Vercel 部署需等待 DNS 生效（通常几分钟）

• 自定义域名需完成 DNS 解析配置（参考 Cloudflare 官方文档 或 Vercel 官方文档）

通过以上步骤，你可以根据自身需求选择最合适的部署方式，快速搭建 PayQrcode 服务。如需进一步定制功能，可基于本地开发环境进行二次开发。