你可以使用“nuxt-socket-io”（v1.1.18）模块代替socket.io-client。它帮助我连接前端和服务器。
在这里我领悟到：

新配置js

modules: [
    'nuxt-socket-io',
],
io: {
    // module options
    sockets: [
      {
        name: 'main',
        default: true,
        url: process.env.PROXY_SOCKET_URL,
      },
    ],
  },

索引值

<script>
    mounted() {
      window.socket = this.$nuxtSocket({
        path: '/socket.io',
        transport: ['websocket'],
      })
      window.socket.open()
    }
</script>

过去几天我一直在玩这个，并有一个无模块的解决方案。
为了socket.io在nuxt提供的同一台服务器上运行www.example.com服务器，我们需要访问Nuxt的服务器。幸运的是，Nuxt的 listen 钩子在服务器启动后就提供了服务器。我们可以通过在nuxt.config.ts中添加以下代码来使用该服务器启动socket.io服务器：

import startSocketServer from "./server/sockets"

defineNuxtConfig({
  ...
  hooks: { listen: (server) => startSocketServer(server) },
  ...
})

在~/server/sockets/index.ts中我们导出一个函数来接受这个服务器并启动socket.io服务器：

import { Server as NuxtServer } from 'node:http'
import {  Socket, Server } from "socket.io";

export default (nuxtServer: NuxtServer) => {
  const io = new Server(nuxtServer)
  io.on("connection", (socket: Socket) => {
    socket.emit('message', "Hello World")
  });
};

服务器到此为止！
如果我们现在有一个app.vue，如下所示：

<script setup lang="ts">
import { io } from "socket.io-client";
const socket = io();
onMounted(() => socket.connect());
onUnmounted(() => socket.close());

const message = ref("");
socket.on("message", (data: string) => (message.value = data));
</script>

<template>
  <div>{{ message }}</div>
</template>

当我们加载页面时，应该会从服务器看到“Hello world”。