1、在 Vue 组件中连接外部 SSE 接口
HTML：
<template><div class="ceshi-wrap"><h3 style="color:red;">来自本地文件的 SSE 流数据：</h3>-----<ul><li v-for="item in messages" :key="item.id"><span v-for="item1 in item" :key="item1.delta.timestamp" v-html="item1.delta.content" style="white-space: pre;"></span></li></ul>+++++</div>
</template>
JS：
mounted() {// http://localhost:3001/sse-stream 为返回EventStream数据的地址const eventSource = new EventSource('http://localhost:3001/sse-stream');// 监听消息事件eventSource.onmessage = (event) => {const data = JSON.parse(event.data);this.messages.push(data.choices);};// 监听错误并关闭连接eventSource.onerror = (error) => {console.error('SSE Error:', error);eventSource.close();};// 组件销毁时关闭连接（避免内存泄漏）this.$once('hook:beforeDestroy', () => {eventSource.close();});
}
2、验证：启动vue项目
npm run serve
说明：
1）自动重连
EventSource 默认会在断开后尝试重连，可通过 eventSource.close() 手动关闭。
2）在使用v-html最后展示时，会把空格去掉，想要让空格正常显示的话，可以添加css：
white-space: pre;
