Vue.js使用Twilio发送SMS报错：Class extends value undefined

问题说明 #

你在Vue.js项目中直接引入Twilio Node.js SDK发送短信，安装了twilio@^5.0.4依赖后，浏览器控制台出现以下错误：

twilio.js?t=17137716…939&v=b4dcae58:2609 Uncaught TypeError: Class extends value undefined is not a constructor or null
at twilio.js?t=17137716…&v=b4dcae58:2609:36
at ../../../node_modules/agent-base/dist/src/index.js (twilio.js?t=17137716…9&v=b4dcae58:2763:7)

错误原因 #

Twilio的Node.js SDK是专为服务端设计的，它依赖Node.js的核心模块（如http、net等），这些模块在浏览器环境中不存在，所以会触发类继承相关的错误。另外，直接在前端代码中暴露你的Twilio Account SID和Auth Token会导致密钥泄露，这是严重的安全隐患。

解决方案 #

必须通过后端接口来处理Twilio短信发送逻辑，前端仅负责调用后端接口传递参数。以下是具体实现步骤：

1. 搭建后端服务（Node.js + Express）

创建一个后端文件（比如server.js），代码如下：

const express = require('express');
const twilio = require('twilio');
const cors = require('cors');
const app = express();

// 允许跨域请求，适配前端Vue项目
app.use(cors());
// 解析JSON格式请求体
app.use(express.json());

// 替换成你的Twilio账号信息
const accountSid = '你的Twilio Account SID';
const authToken = '你的Twilio Auth Token';
const twilioNumber = '你的Twilio号码';
const client = twilio(accountSid, authToken);

// 定义发送短信的接口
app.post('/send-sms', async (req, res) => {
  const { to, body } = req.body;
  try {
    const message = await client.messages.create({
      body,
      from: twilioNumber,
      to
    });
    res.status(200).json({ success: true, messageSid: message.sid });
  } catch (error) {
    console.error('发送短信失败:', error);
    res.status(500).json({ success: false, error: error.message });
  }
});

// 启动后端服务，端口3000
app.listen(3000, () => {
  console.log('后端服务运行在 http://localhost:3000');
});

2. 修改Vue前端代码

移除对Twilio SDK的直接引入，改用axios调用后端接口：

<template>
 <div>
   <input type="text" v-model="to" placeholder="电话号码">
   <textarea v-model="body" placeholder="短信内容"></textarea>
   <button @click="sendSMS">发送短信</button>
 </div>
</template>

<script>
import axios from 'axios';

export default {
 data() {
   return {
     to: '',
     body: '',
   };
 },
 methods: {
   async sendSMS() {
     try {
       await axios.post('http://localhost:3000/send-sms', {
         to: this.to,
         body: this.body
       });
       alert('短信发送成功！');
     } catch (error) {
       console.error('发送短信出错:', error);
       alert('短信发送失败，请重试。');
     }
   },
 },
};
</script>

3. 运行项目

• 后端安装依赖：执行npm install express twilio cors
• 启动后端：node server.js
• 前端安装axios：npm install axios
• 启动Vue项目，测试短信发送功能

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