在Node.js环境中运行HTML文件，核心是通过读取本地HTML文件的路径，将文件内容返回给客户端展示，常见的方式有两种，分别是直接读取单个HTML文件返回，以及搭建静态资源服务处理多个HTML文件路径。
方法一：读取单个HTML文件路径返回内容
这种方式适合只需要运行某一个固定HTML文件的场景，核心是使用fs模块读取文件，再通过http模块将内容返回给浏览器。
实现步骤
- 引入需要的
fs和http模块 - 使用
fs.readFile方法读取指定路径的HTML文件 - 创建http服务，将读取到的文件内容作为响应返回
- 启动服务后访问对应端口即可看到HTML内容
代码示例
const fs = require('fs');
const http = require('http');
// 定义HTML文件的路径，这里使用当前目录下的index.html
const htmlPath = './index.html';
const server = http.createServer((req, res) => {
// 读取HTML文件内容
fs.readFile(htmlPath, (err, data) => {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('未找到对应的HTML文件');
return;
}
// 设置响应头为html类型
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
res.end(data);
});
});
server.listen(3000, () => {
console.log('服务启动成功，访问 http://127.0.0.1:3000 查看HTML内容');
});
需要注意HTML文件的路径要写对，如果是相对路径，是相对于运行Node脚本的目录，也可以使用绝对路径避免出错，比如const htmlPath = '/Users/test/project/index.html';。
方法二：搭建静态资源服务处理多个HTML路径
如果需要运行多个不同路径的HTML文件，比如访问/page1返回page1.html，访问/page2返回page2.html，就需要搭建静态资源服务，根据请求的URL匹配对应的HTML文件路径。
实现逻辑
首先获取请求的URL路径，将路径映射到对应的HTML文件路径，再读取对应的文件返回，如果文件不存在就返回404错误。
代码示例
const fs = require('fs');
const http = require('http');
const path = require('path');
// 静态资源根目录，HTML文件都放在这个目录下
const staticDir = path.join(__dirname, 'html');
const server = http.createServer((req, res) => {
// 获取请求的URL，默认请求根路径时返回index.html
let urlPath = req.url === '/' ? '/index.html' : req.url;
// 拼接对应的HTML文件路径
const filePath = path.join(staticDir, urlPath);
// 读取文件
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
res.end('未找到对应的HTML文件');
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 查看对应HTML内容');
});
这种方式下，只需要在html目录下放置对应的HTML文件，比如放置page1.html后，访问http://127.0.0.1:3000/page1.html就可以运行该HTML文件，路径匹配更加灵活。
常见问题排查
- 如果提示文件不存在，首先检查HTML文件路径是否正确，可以使用
path.resolve方法查看路径的绝对地址确认 - 如果返回的HTML内容乱码，检查响应头的
charset是否设置为utf-8，同时HTML文件本身的编码也要是utf-8 - 如果访问路径报错，检查是否有文件读取权限，以及路径中是否包含特殊字符需要转义