Node.js服务器环境下CSS与JS静态资源无法正常加载问题

错误根因 #

express.static静态资源中间件配置有误：当前代码直接将静态资源指向了public/style.css单个文件，而非整个public静态资源根目录，导致所有静态资源的路径映射规则完全不符合预期。

修复步骤 #

• 调整静态资源中间件配置
  删除原有错误的配置行：
  app.use(express.static(path.join(__dirname, 'public/style.css')));
  替换为指向整个public目录的配置：
  app.use(express.static(path.join(__dirname, 'public')));
• 核对前端资源引用路径
  静态根目录映射完成后，public目录下的所有文件都会直接通过根路径访问，不需要加public前缀：
  引用public下的style.css写法：<link rel="stylesheet" href="/style.css">
  引用public下的JS文件写法：<script src="/js/xxx.js"></script>
• 清理冗余代码
  当前代码存在重复导入express的冗余逻辑：第一行已经通过require('express')()初始化了app实例，后续的var express = require('express');属于多余导入。可以将顶部导入逻辑调整为更规范的写法：
  const express = require('express'); const app = express();
  这样后续调用express.static时不需要重复导入模块。

验证方法 #

修改完成后重启Node服务，打开浏览器开发者工具的「网络」面板，刷新页面查看静态资源请求状态，返回200即为加载正常；若返回404可直接核对请求路径和public下的实际文件路径是否完全匹配。

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