使用Vite+React+Socket.io搭建实时服务器遇404错误求助

开发环境（外部Express服务器）404错误解决 #

你的核心问题是单独运行的Express服务器没有处理Vite开发阶段的资源请求，导致前端试图从Express端口（3001）加载src/main.jsx但找不到对应文件。正确的做法是将Vite作为中间件集成到Express中，让Vite负责处理开发资源，Express专注于Socket.io逻辑。

修正后的服务器代码（server.js） #

const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');
const { createViteServer } = require('vite');

async function startServer() {
  const app = express();
  const httpServer = createServer(app);
  const io = new Server(httpServer, {
    cors: {
      origin: "http://localhost:5173", // 匹配Vite默认开发端口
      methods: ["GET", "POST"]
    }
  });

  // 挂载Vite中间件处理开发资源
  const vite = await createViteServer({
    server: { middlewareMode: 'ssr' },
    appType: 'react'
  });
  app.use(vite.middlewares);

  // 实时同步逻辑示例
  io.on('connection', (socket) => {
    console.log('用户已连接:', socket.id);
    
    socket.on('sync-update', (data) => {
      // 广播变更给其他在线用户
      socket.broadcast.emit('receive-update', data);
    });

    socket.on('disconnect', () => {
      console.log('用户已断开:', socket.id);
    });
  });

  httpServer.listen(3001, () => {
    console.log('服务器运行在 http://localhost:3001');
    console.log('前端访问地址：http://localhost:5173');
  });
}

startServer();

前端Socket连接配置 #

在React组件中，连接到Express服务器的3001端口：

import { io } from 'socket.io-client';

// 开发环境连接配置
const socket = io('http://localhost:3001');

运行方式：

1. 启动服务器：node server.js
2. 正常启动Vite开发服务：npm run dev
3. 访问http://localhost:5173即可，资源由Vite处理，Socket通信走3001端口。

生产环境（build后Live Server）404错误解决 #

build后出现的资源加载错误，主要是资源路径配置错误或Live Server根目录不对导致的。

步骤1：修正Vite资源路径配置 #

修改vite.config.js，设置相对路径适配任意部署根目录：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: './' // 设置为相对路径，避免绝对路径导致的404
});

步骤2：正确使用Live Server #

1. 执行npm run build生成dist文件夹
2. 打开dist文件夹，右键选择"Open with Live Server"（而不是在项目根目录打开）
3. 此时Live Server的根目录是dist，资源路径会正确匹配，不会出现404。

额外注意事项 #

• 确保安装了所有依赖：npm install express socket.io vite @vitejs/plugin-react
• Socket.io的CORS配置要严格匹配前端地址，生产环境可根据部署域名调整origin值

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