Node.js+Express服务HTML页面无法加载脚本文件问题求助

嘿，我来帮你搞定这个静态资源加载的问题！看起来你的代码里有两个小细节没处理好，咱们一步步修复：

问题根源 #

1. 静态资源路径拼接错误：你在设置express.static时，__dirname + 'client'少了一个斜杠，导致路径拼接后变成了类似/your-project-pathclient（而不是正确的/your-project-path/client），Express找不到你的静态文件夹。
2. HTML中的脚本路径错误：因为你已经把client设为静态资源目录，所以访问里面的文件时不需要再加/client前缀，否则会去找/client/client/client.js，自然加载失败。

修改后的完整代码 #

Node.js 代码 #

var express = require('express');
var path = require('path');
var app = express();

// 用path.join规范拼接路径，自动适配不同操作系统的路径分隔符
app.use(express.static(path.join(__dirname, 'client')));

app.get('/', function(req, res) {
  // 同样用path.join来拼接HTML文件路径
  res.sendFile(path.join(__dirname, 'client', 'index.html'));
});

// 别忘了添加端口监听，不然服务器启动不了哦
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

HTML 文件 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Login</title>
  <meta name="description" content="Login Page">
  <meta name="author" content="AlbertoCoder">
  <!-- 直接指向静态目录下的client.js -->
  <script src="/client.js"></script>
</head>
<body>
</body>
</html>

额外小建议 #

• 尽量用path.join()来拼接所有文件路径，它会自动处理Windows和Linux系统不同的路径分隔符，避免出现跨平台的路径问题。
• 启动服务器后，可以直接在浏览器访问http://localhost:3000/client.js，如果能看到脚本内容，说明静态资源配置成功了。

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