使用Node.js部署含JS/CSS的HTML文件时静态资源无法加载求助

你的问题出在静态文件目录与HTML文件的路径不匹配，以及sendFile的根目录设置导致浏览器无法正确加载静态资源。以下是具体修正方案：

核心问题分析 #

1. 你通过express.static('project-folder')托管了project-folder作为静态资源目录，但res.sendFile使用__dirname作为根目录返回website.html。如果website.html不在__dirname下，或者HTML里引用CSS/JS的路径是相对project-folder的，浏览器请求资源时会找不到对应文件。
2. HTML中引用静态资源的路径如果是相对路径（比如./css/style.css），会基于当前页面的URL路径解析，容易出现路径错误。

修正方案 #

方案一：调整sendFile的路径指向静态目录 #

首先确保website.html在project-folder目录下，然后修改代码如下：

const express = require('express');
const app = express();
const port = 3000;
const path = require('path');

// 托管project-folder为静态资源目录
app.use(express.static('project-folder'));

// 正确指向project-folder下的website.html
app.get('/', function(req, res){
    res.sendFile(path.join(__dirname, 'project-folder', 'website.html'));
});

app.listen(port, function(){
    console.log("server is up");
});

方案二：利用静态托管直接跳转 #

既然已经托管了project-folder，可以直接让根路径跳转到静态目录下的website.html，代码更简洁：

const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('project-folder'));

// 根路径重定向到静态文件
app.get('/', function(req, res){
    res.redirect('/website.html');
});

app.listen(port, function(){
    console.log("server is up");
});

关键注意事项 #

• HTML中引用CSS/JS时，务必使用绝对路径（以/开头），比如：

  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/main.js"></script>
  

  这样浏览器会基于你设置的静态目录project-folder去查找资源（对应project-folder/css/style.css和project-folder/js/main.js）。
• 确认project-folder目录结构正确，所有静态资源（CSS、JS、JSON）都放在该目录下。

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