从你的截图能看到两个核心问题好友数据已经拿到了但页面显示「暂无好友」控制台里friendList数组里明明有{id:1, nickname:小王}页面却渲染了空状态说明v-for循环没生效或数组判断逻辑有问题WebSocket 安全报错plaintextSecurityError: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.你现在用的是https://longwen.natapp1.cc但 WebSocket 连的是ws://192.168.0.103:8080浏览器禁止在 HTTPS 页面发起非加密 ws 连接必须改成wss://或用同域名代理✅ 第一步修复好友列表显示问题问题出在空状态判断和数组渲染逻辑我帮你改成最稳妥的版本vue!-- 把原来的空状态代码替换成这个 -- div v-iffriendList.length 0 stylepadding:16px; color:#999; text-align:center; 暂无好友当前数组长度{{ friendList.length }} /div div classitem-list v-forfriend in friendList :keyfriend.id clickopenPrivateChat(friend) stylecursor:pointer; img classavatar :srcIMG_BASE friend.avatar / div classname{{ friend.nickname }} (ID:{{ friend.id }})/div /div同时在getFriendList里强制打印数组长度方便你调试jsconst getFriendList async () { try { const res await service.get(/friends) const data res.data?.data || res.data || [] friendList.value Array.isArray(data) ? data : [] console.log(✅ 好友列表最终长度:, friendList.value.length) console.log(✅ 好友列表内容:, friendList.value) } catch (e) { console.error(❌ 获取好友失败, e) friendList.value [] } }✅ 第二步修复 WebSocket 安全问题把ws://改成wss://如果你的后端支持 wss或者用 Natapp 域名代理js// 原来的代码 // socket new WebSocket(ws://192.168.0.103:8080/ws?user_id${myId.value}) // 改成下面任意一种 // 方案1如果你的后端支持 wss推荐 socket new WebSocket(wss://192.168.0.103:8080/ws?user_id${myId.value}) // 方案2用 Natapp 域名和页面同域名避免跨域 socket new WebSocket(wss://longwen.natapp1.cc/ws?user_id${myId.value}) 最终效果页面会显示「小王」的好友条目不再显示「暂无好友」WebSocket 连接不再报安全错误能正常实时聊天 额外检查如果改完还是不显示打开控制台输入jsfriendList.value看返回是不是[{id:1, nickname:小王, ...}]如果是数组但页面不渲染就是 Vue 响应式问题加一句强制更新jsimport { nextTick } from vue // 在 getFriendList 最后加 nextTick(() console.log(✅ 页面已更新))要不要我把完整修复后的代码直接给你你复制覆盖就能用