在Node.js环境里让HTML内容被浏览器访问到，核心思路都是由服务端接收HTTP请求，然后把HTML文本作为响应体返回。根据项目规模不同，可以选择从零使用原生模块，也可以借助成熟框架。理解这一过程有助于排查静态资源404与MIME类型错误。
一、使用原生http与fs模块搭建静态服务器
Node.js自带http和fs模块，无需安装第三方包即可实现一个最精简的HTML服务器。其原理是监听指定端口，当收到请求时读取磁盘上的HTML文件，并设置Content-Type响应头为text/html，随后将文件内容写入响应对象。
这种方式的优势是依赖极少、逻辑透明，适合学习底层机制或做轻量演示。缺点是需自行处理不同路径、文件不存在的情况以及其它静态资源（如css、js）的返回，功能完备性不如框架。
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
// 默认指向index.html
let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404, {'Content-Type': 'text/plain; charset=utf-8'});
res.end('文件未找到');
return;
}
res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
res.end(data);
});
});
server.listen(3000, () => {
console.log('服务器运行在 http://127.0.0.1:3000');
});
上述代码中，path.join用来拼接安全的文件路径，避免请求中携带../造成目录穿越。读取成功后直接end(data)即可，浏览器收到HTML会自行解析渲染。若需支持多个页面，可依据req.url分别映射不同文件。
原生方案处理静态资源的补充
当HTML引用了外部样式表或脚本，原生方案要识别文件后缀并返回对应MIME类型，否则浏览器可能拒绝执行。可维护一个简单映射表，根据extname返回类型。
const mimeTypes = {
'.html': 'text/html',
'.css': 'text/css',
'.js': 'application/javascript',
'.png': 'image/png'
};
// 在readFile成功后：
const ext = path.extname(filePath);
res.writeHead(200, {'Content-Type': mimeTypes[ext] || 'application/octet-stream'});
这样HTML里的<link>与<script>标签才能正常加载。虽然代码变多，但能直观展现Web服务器的基础职责。
二、通过Express托管HTML与静态目录
Express是Node.js最流行的Web框架，它提供express.static中间件，可以一行代码把整个文件夹作为静态资源根目录，自动处理HTML、CSS、JS及图片等请求。对多数业务项目而言，这是运行HTML最高效的方式。
使用Express不仅减少样板代码，还内置了缓存控制、断点续传等能力。开发者只需把HTML放进public目录，访问根路径即可看到页面，不必关心文件读取与头信息设置。
const express = require('express');
const app = express();
// 将public目录作为静态资源目录
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Express服务已启动: http://127.0.0.1:3000');
});
假设项目结构为public/index.html，启动后浏览器访问http://127.0.0.1:3000/就会返回index.html。若想指定虚拟路径前缀，可写成app.use('/static', express.static('public'))，此时HTML需引用/static/下的资源。
Express中直接渲染HTML字符串
有时HTML并非静态文件，而是根据数据动态拼装。可用res.send()直接发送字符串，或配置视图引擎。下面示例展示如何把变量注入简单HTML并返回。
app.get('/hello', (req, res) => {
const name = '访客';
res.send('<h1>你好，' + name + '</h1>');
});
该方式灵活但易引发注入风险，生产环境建议结合模板引擎如EJS，将逻辑与标签分离，提升可维护性。
三、利用模板引擎在Node中运行带数据的HTML
如果HTML需要服务端动态数据，例如展示用户列表，原生拼接字符串既难读又易错。模板引擎（如EJS、Pug）允许在HTML中嵌入变量与循环，由Node渲染成完整页面再返回。这仍属于Node运行HTML的范畴，只是HTML内容在运行时生成。
以EJS为例，先安装ejs，再将引擎设为视图引擎，把模板放在views目录。渲染时调用res.render并传入数据对象，框架会完成替换。该方案兼顾动态性与结构清晰，是中后台系统的常用做法。
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
const items = ['Node', 'HTML', 'HTTP'];
res.render('index', { title: '演示', items: items });
});
对应views/index.ejs内容如下，其中<%= %>用于输出变量，<% %>书写控制逻辑：
<!DOCTYPE html>
<html>
<head><title><%= title %></title></head>
<body>
<ul>
<% items.forEach(function(it){ %>
<li><%= it %></li>
<% }); %>
</ul>
</body>
</html>
如此一来，Node.js不只是提供接口，而是完整承担了HTML页面的生成与投递。三种方法中，原生模块适合理解原理，Express适合快速搭建，模板引擎适合动态页面，按场景取舍即可。
Node.jsHTMLhttp_server修改时间：2026-08-09 14:00:36