Express.js + Node.js 服务端返回HTML页面缺失CSS与JS资源问题咨询

• 未配置静态资源托管规则：Express默认不会自动返回项目目录里的静态文件，你只配置了根路径/返回HTML文件，HTML中引用的CSS、JS等资源请求到达服务端时没有对应的处理逻辑，直接返回404，导致页面只有纯HTML结构没有样式和交互。
• 路径写法存在转义问题：JavaScript字符串中反斜杠\是转义字符，你写的__dirname + '\client\dist\index.html'会被转义为无效路径，无法正确定位到目标HTML文件。

1. 引入Node.js内置path模块处理路径拼接，避免转义问题和跨平台路径兼容问题。
2. 配置express.static中间件，将前端构建产物目录client/dist设置为静态资源托管目录，该目录下的所有CSS、JS、图片等资源会被Express自动处理返回。
3. 修正sendFile的路径写法，用path.join拼接绝对路径。

修复后完整代码 #

const express = require('express');
const path = require('path');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);

// 配置静态资源托管，client/dist下的资源会被自动响应
app.use(express.static(path.join(__dirname, 'client/dist')));

app.get('/', (req, res) => {
  // 用path.join拼接路径，避免转义问题
  res.sendFile(path.join(__dirname, 'client/dist', 'index.html'));
});

// 注意：集成socket.io时要用server监听端口，不要用app.listen
server.listen(3000, () => {
  console.log('服务运行在 http://localhost:3000');
});

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