Node.js中Express托管HTML页面无法加载CSS样式问题求助

我一眼就看出问题所在了——你的Express服务器没有配置静态资源托管！

当你直接用Go-Live预览HTML文件时，浏览器是从本地文件系统直接读取CSS、图片这些资源的；但当通过Express运行时，浏览器会向服务器发送请求获取这些资源，而你的当前代码只处理了根路径/的HTML请求，完全没管CSS、图片的请求，所以浏览器拿不到样式文件，自然只能显示纯HTML了。

解决步骤： #

1. 先整理你的项目结构（建议）

把所有静态资源（CSS、图片、前端JS）放到一个专门的文件夹里，比如命名为public，结构大概是这样：

你的项目根目录/
├── server.js (你的Express代码文件)
├── HTML.html
└── public/
    ├── HTML.css
    └── static/
        └── Pb_O_Wsm.png

2. 修改HTML里的资源引用路径

因为之后Express会托管public文件夹，所以资源路径要调整成服务器可访问的路径：

• CSS链接改成：<link rel="stylesheet" href="/HTML.css">
• 图片src改成：<img id="logo" src="/static/Pb_O_Wsm.png" alt="Img not found">
• 导航栏的链接如果是指向首页，改成：<a id="a1" href="/" target="_blank">Html</a>（因为根路由返回的就是你的首页HTML）

3. 更新Express代码，添加静态资源中间件

在你的Express代码里加入express.static中间件，用来处理静态资源的请求：

const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;

// 关键：托管public文件夹下的所有静态资源
app.use(express.static('public'));

const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(home_html);
});

app.listen(port, () => {
  console.log(`The application started successfully on port ${port}`);
});

原理说明： #

express.static是Express内置的中间件，它会自动拦截对静态资源的请求，比如当浏览器请求/HTML.css时，中间件会去public文件夹里找到这个文件，然后返回给浏览器，这样CSS就能正常加载，页面样式就和直接预览时一样了。

最后检查一下所有文件的路径是否匹配，重启Express服务器，再访问页面应该就能正常显示样式了！

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