在Vue 3中使用Twilio发送WhatsApp消息时遇错误求解决方案

问题描述 #

尝试在Vue项目中直接调用Twilio客户端发送WhatsApp消息，代码及报错信息如下：

twilio.js 文件 #

import { Twilio } from 'twilio';

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;

const twilioClient = new Twilio(accountSid, authToken);;

export default twilioClient;

Text.vue 文件 #

<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import twilioClient from '@/stores/twilio.js';

async function sendMessage() {
  try {
    const message = await twilioClient.messages.create({
      body: "Hello there!",
      from: 'whatsapp:+1234567890',
            to: 'whatsapp:+1234567890'
    });

    console.log(message.body);
  } catch (error) {
    console.error('Error sending message:', error);
  }
}
</script>

<template>
  <button @click="sendMessage">Send Message</button>
</template>

运行时触发错误：

Uncaught TypeError: class heritage events_1.EventEmitter is not an object or null

注：已通过npm install twilio完成依赖安装。

问题原因 #

1. 环境不兼容：Twilio官方Node.js SDK是为后端Node.js环境设计的，依赖Node.js核心模块（如events），前端浏览器环境不支持这些模块，因此会出现EventEmitter相关报错。
2. 安全风险：前端代码会直接暴露TWILIO_ACCOUNT_SID和AUTH_TOKEN，极易导致账号被盗用，属于严重的安全漏洞。

Vue中使用Twilio的最佳方式 #

正确做法是通过后端接口中转调用Twilio API，具体步骤如下：

1. 搭建后端中转接口（以Node.js/Express为例） #

创建后端路由，负责处理Twilio API调用，避免敏感信息暴露：

// 后端路由文件示例
const express = require('express');
const router = express.Router();
const { Twilio } = require('twilio');

// 从环境变量读取敏感信息
const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const twilioClient = new Twilio(accountSid, authToken);

// 发送WhatsApp消息接口
router.post('/send-whatsapp', async (req, res) => {
  try {
    const { to, body } = req.body;
    const message = await twilioClient.messages.create({
      body,
      from: 'whatsapp:+你的Twilio验证号码',
      to: `whatsapp:+${to}`
    });
    res.status(200).json({ success: true, messageSid: message.sid });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

module.exports = router;

2. Vue前端调用后端接口 #

修改Vue组件，通过HTTP请求调用后端接口，不再直接引入Twilio SDK：

<!-- Text.vue 优化后代码 -->
<script setup>
import axios from 'axios';

async function sendMessage() {
  try {
    const response = await axios.post('/api/send-whatsapp', {
      to: '1234567890',
      body: 'Hello there!'
    });
    console.log('消息发送成功:', response.data);
  } catch (error) {
    console.error('发送失败:', error.response.data.error);
  }
}
</script>

<template>
  <button @click="sendMessage">Send Message</button>
</template>

额外注意事项 #

• 确保后端环境变量TWILIO_ACCOUNT_SID和AUTH_TOKEN配置正确，且仅在后端环境中存储。
• 使用Twilio WhatsApp服务前，需在Twilio控制台完成号码验证、模板审核（如需发送模板消息）等配置。
• 前端请求后端接口时，需处理跨域问题，可在后端配置CORS规则。

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