Node.js服务器中CSS与JavaScript无法加载问题求助

嘿，我一眼就看出问题所在了——你的Node.js HTTP服务器压根没处理静态资源（CSS/JS文件）的请求！这就是为什么内嵌代码能生效，但通过src引入外部文件就不行的原因。

问题根源分析 #

当浏览器加载你返回的HTML页面后，会根据页面里的src/href属性去请求对应的JS/CSS文件，比如你提到的127.0.0.1/home.js。但看你的代码，当前服务器只处理了/home、/itemShop、/tournaments和/items/xxx这些页面路径，完全没考虑静态资源的请求逻辑。所以当浏览器请求/home.js时，直接走到了最后的404分支，返回“could not find URL”，浏览器拿不到文件，自然没法生效。

解决办法分三步走： #

1. 整理静态资源结构

先在项目根目录下创建一个public文件夹，专门存放所有静态资源，规范结构如下：

你的项目根目录/
├── public/
│   ├── js/
│   │   └── home.js
│   └── css/
│       └── style.css
├── templates/
│   ├── template-basic.html
│   └── template-battlepass.html
└── 你的服务器入口文件（比如server.js）

2. 修改服务器代码，添加静态资源处理逻辑

首先引入Node.js的path模块（用来安全处理文件路径），然后在现有路由判断之前，新增处理静态资源的分支：

修改后的完整代码示例：

const fetch = require('node-fetch'); 
const fs = require("fs"); 
const http = require("http"); 
const url = require("url"); 
const path = require("path"); // 新增path模块

const server = http.createServer((req, res) => { 
  const pathName = url.parse(req.url, true).pathname; 
  console.log(pathName); 

  // --------------------------
  // 新增：处理静态资源请求（JS、CSS、图片等）
  // --------------------------
  const staticExtensions = ['.js', '.css', '.png', '.jpg', '.svg'];
  const fileExt = path.extname(pathName);
  if (staticExtensions.includes(fileExt)) {
    // 拼接静态资源的绝对路径
    const filePath = path.join(__dirname, 'public', pathName);
    
    // 根据文件后缀设置正确的Content-Type
    let contentType = 'text/plain';
    switch(fileExt) {
      case '.js':
        contentType = 'application/javascript';
        break;
      case '.css':
        contentType = 'text/css';
        break;
      case '.png':
        contentType = 'image/png';
        break;
      case '.jpg':
        contentType = 'image/jpeg';
        break;
      case '.svg':
        contentType = 'image/svg+xml';
        break;
    }

    // 读取文件并返回给浏览器
    fs.readFile(filePath, (err, data) => {
      if (err) {
        // 如果文件不存在，返回404
        res.writeHead(404, {'Content-Type': 'text/html'});
        res.end('Static resource not found');
        return;
      }
      res.writeHead(200, {'Content-Type': contentType});
      res.end(data);
      return;
    });
    // 处理完静态资源，直接返回，不执行后面的路由逻辑
    return;
  }

  // --------------------------
  // 原有页面路由逻辑（保持不变）
  // --------------------------
  const pathSplit = pathName.split("/"); 
  pathSplit.shift(); 

  // HOME PATH 
  if(pathName === "/home" || pathName === "/"){ 
    fs.readFile(`${__dirname}/templates/template-basic.html`, "utf-8", (err, data) => { 
      fs.readFile(`${__dirname}/templates/template-battlepass.html`, "utf-8", (err, d) => { 
        let output = data.replace("{%CONTAINER%}", d); 
        res.end(output); 
      }); 
    }); 
  } 
  // ITEM SHOP PATH 
  else if(pathName === "/itemShop") { 
    res.writeHead(200, {"content-type": "text/html"}); 
    res.end("This is the item shop page"); 
  } 
  // TOURNAMENTS PATH 
  else if(pathName === "/tournaments") { 
    res.writeHead(200, {"content-type": "text/html"}); 
    res.end("this is the tournaments page"); 
  } 
  // ITEMS PATH 
  else if(pathSplit[0] === "items") { 
    const itemsPages = ["backpacks", "contrails", "emotes", "gliders", "skins", "pickaxes", "wraps"]; 
    let itemConfirm = false; 
    for(let i = 0; i < itemsPages.length; i++){ 
      if(itemsPages[i] === pathSplit[1]){ 
        res.writeHead(200, {"content-type": "text/html"}); 
        res.end(`This is the page for ${pathSplit[1]} in items`); 
        itemConfirm = true; 
      } 
    }; 
    if(itemConfirm === false) { 
      res.writeHead(404, {"content-type": "text/html"}); 
      res.end(`No URL found for ${pathSplit[1]} in items`); 
    }; 
  } 
  // NO URL FOUND PATH: 404 
  else{ 
    res.writeHead(404, {"content-type": "text/html"}); 
    res.end("could not find URL"); 
  } 
}); 

server.listen(1337, "127.0.0.1", () => { 
  console.log("listening for reqs now"); 
});

3. 修正HTML里的资源引入路径

最后，确保HTML里的资源引用是绝对路径（以/开头），比如：

<!-- 正确的引入方式 -->
<link rel="stylesheet" href="/css/style.css">
<script src="/js/home.js"></script>

如果用相对路径（比如home.js），浏览器会在当前页面路径下查找，比如在/home页面会请求/home/home.js，这显然不是你要的。

这样修改后，浏览器请求静态资源时，服务器就能正确读取文件并返回，你的CSS和JS就能正常生效了。

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