Node.js Express监听3000端口正常但localhost加载页面异常求助

• express.static() 接收的参数必须是存放静态资源的目录路径，不能传单个文件路径，你最初直接传app.html的文件路径，这个中间件根本不会生效。
• 你调整后的代码把静态资源托管的代码注释掉了，即使首页html能通过/路由返回，html里引用的CSS、JS文件也没有对应的路由处理，浏览器请求这些资源会直接返回404，页面加载异常。
• 前端HTML里的资源路径写法完全错误：
  • 浏览器不能直接通过本地磁盘绝对路径（比如/Users/name/xxx/xxx.js）请求服务器上的文件，所有静态资源都要通过HTTP路由访问
  • script标签不存在href属性，引用脚本必须用src属性
  • server.js是服务端运行的Node代码，不能作为前端脚本在浏览器里引入，会直接报错
  • link标签写在body末尾不符合规范，应该放在head区域

• 1. 修改服务端server.js代码，正确配置静态资源托管，推荐用path模块拼接路径避免跨系统路径兼容问题：

const express = require("express");
const path = require("path");
const app = express();
const PORT = 3000;

// 托管public目录下所有静态资源（css、js、图片、静态html等）
const publicPath = path.join("/Users/name/Desktop/Weather App", "public");
app.use(express.static(publicPath));

// 根路由返回首页
app.get("/", (req, res) => {
  res.sendFile(path.join(publicPath, "app.html"));
});

app.listen(PORT, () => {
  console.log(`服务已启动，监听端口${PORT}`);
});

• 2. 修改app.html的资源引用，删掉错误的服务端脚本引入，调整路径为web根路径下的相对路径：

<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
  <!-- 样式表移到head区域，路径直接写文件名，静态资源托管会自动匹配public下的文件 -->
  <link href="/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <h1>Weather App</h1>
  <div id="container">
    <p>
      Place: <span id="places"></span><br/><br/>
      Temperature: <span id="temperature"></span>&degC<br/><br/>
      Feels like: <span id="feels"></span>&degC<br/><br/>
      Minimum Temp: <span id="min"></span>&degC<br/><br/>
      Maximum Temp: <span id="max"></span>&degC<br/><br/>
      Humidty: <span id="hum"></span>&percnt;<br/> 
    </p>    
    <div>
      <input id="inputter" type="text"><br/><br/>
      <button id="entButton">Click here for weather forecast</button><br/><br/>
      <button id="geoEnter">Click here for fast weather</button><br/>
    </div>
  </div>
  <!-- 删掉错误的server.js引用，前端脚本路径直接写文件名即可 -->
  <script src="/app.js"></script>
</body>
</html>

• 3. 验证注意事项
  • 确认public目录下存在app.html、app.js、style.css三个文件，文件名大小写完全匹配
  • 每次修改服务端代码后，必须终止当前Node进程，重新执行node server.js启动服务，Node默认不会自动热重载代码
  • 访问时打开浏览器F12开发者工具，查看「网络」面板，如果有资源报404，对应检查文件位置和静态资源配置即可

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