如何在Vercel的Node.js项目中配置whatsapp-web-js并解决部署报错

一、正确添加whatsapp-web-js包 #

1. 常规安装包：
   在项目根目录执行命令：

   npm install whatsapp-web-js
   # 或 yarn add whatsapp-web-js
   

2. 替换Puppeteer为puppeteer-core
   Vercel无服务器环境对完整Puppeteer支持有限，需卸载默认依赖的Puppeteer，改用轻量的puppeteer-core：

   npm uninstall puppeteer
   npm install puppeteer-core
   

二、修复Puppeteer触发的无服务器函数错误 #

1. 配置代码中的Puppeteer参数 #

修改whatsapp-web-js的客户端初始化代码，适配Vercel环境：

const { Client } = require('whatsapp-web-js');
const puppeteer = require('puppeteer-core');

const client = new Client({
  puppeteer: {
    executablePath: process.env.CHROME_EXECUTABLE_PATH || '/usr/bin/chromium-browser',
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--headless=new']
  }
});

2. 添加Vercel环境变量 #

进入Vercel项目的「Settings」→「Environment Variables」，添加以下变量：

• PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true：跳过Chromium下载（Vercel环境已预装兼容版）
• CHROME_EXECUTABLE_PATH=/usr/bin/chromium-browser：指定系统Chrome的执行路径

3. 处理会话持久化（关键） #

无服务器函数临时运行，默认本地会话存储会丢失，需改用远程存储（如Redis）保存会话数据。示例（需自行实现Redis存储逻辑）：

const { Client, LocalAuth } = require('whatsapp-web-js');
const { RedisAuthStore } = require('./redis-auth-store'); // 自定义Redis存储类

const client = new Client({
  authStrategy: new LocalAuth({
    store: new RedisAuthStore()
  }),
  puppeteer: { /* 上述配置 */ }
});

三、在Vercel中执行自定义命令 #

Vercel允许通过package.json脚本定义部署阶段的自定义命令：

1. 在项目根目录的package.json中添加自定义构建脚本：

{
  "scripts": {
    "vercel-build": "npm install && 你的自定义命令"
  }
}

2. 进入Vercel项目的「Settings」→「General」→「Build & Development Settings」，将「Build Command」设置为npm run vercel-build，部署时会自动执行该脚本中的命令。

内容的提问来源于stack exchange，提问作者arslan ahmed