Nodejs新人请教：怎么获得客户端的js、css文件？

当然可以。你的问题涉及到如何设置Node.js服务器来正确地提供HTML文件以及相关的JavaScript和CSS文件。我们需要确保服务器能够正确处理不同类型的文件请求，并将它们发送到客户端。

解决方案

我们可以使用Node.js内置的http模块创建一个简单的HTTP服务器，并且使用fs模块来读取文件。此外，我们还需要根据不同的文件类型（如.html, .js, .css）设置相应的Content-Type头部信息。

示例代码

首先，确保你已经安装了Node.js。然后，你可以创建一个名为server.js的文件，并添加以下代码：

const http = require('http');
const fs = require('fs');
const path = require('path');

// 创建服务器
const server = http.createServer((req, res) => {
    // 获取请求的URL路径
    const filePath = req.url === '/' ? '/index.html' : req.url;
    
    // 设置默认的MIME类型
    let contentType = 'text/html';
    
    // 根据文件扩展名设置Content-Type
    switch(path.extname(filePath)) {
        case '.js':
            contentType = 'application/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        default:
            contentType = 'text/html';
            break;
    }
    
    // 读取文件
    fs.readFile(
        path.join(__dirname, filePath),
        (err, content) => {
            if (err) {
                if (err.code == 'ENOENT') {
                    // 文件不存在
                    res.writeHead(404);
                    res.end('404 Not Found');
                } else {
                    // 其他错误
                    res.writeHead(500);
                    res.end(`Server Error: ${err.code}`);
                }
            } else {
                // 发送正确的Content-Type
                res.writeHead(200, { 'Content-Type': contentType });
                res.end(content, 'utf-8');
            }
        }
    );
});

// 监听端口
server.listen(8080, () => console.log('Server running on port 8080'));

解释

服务器创建：使用http.createServer()创建一个HTTP服务器，并为每个请求调用回调函数。
文件路径处理：根据请求的URL路径选择要读取的文件。如果请求的是根路径（/），则默认读取index.html。
Content-Type设置：根据文件的扩展名设置响应的Content-Type头部。例如，对于.js文件，设置为application/javascript；对于.css文件，设置为text/css。
文件读取：使用fs.readFile()异步读取文件内容。如果文件不存在或发生其他错误，则返回适当的HTTP状态码（如404或500）。
响应发送：成功读取文件后，设置正确的Content-Type并发送文件内容。

通过这种方式，你的服务器将能够正确处理各种静态资源请求，包括HTML、JavaScript和CSS文件。

h691938207 2楼

你可以看看这个：Node入门，对nodejs web开发有了一点概念之后，可以看看expressjs之类的web开发框架。

phonegap100 3楼

谢谢你的回复，如果把客户端的js代码直接写入index.html还行，但是要把客户端js和index.html分开就不知道怎么写了，我现在急需一个这样的demo，还希望你能知道一下，多谢！

caililin 4楼

谢谢大家的回复，那我先学习学习，不会的再请教大家，谢谢！

caililin 5楼

不是大家不回答你的问题。有疑问还是随时可以问:-)

h691938207 6楼

要想传递不同的资源（html、js、css、image、voice、video等），如果使用原生写法，就要加入不同的content-type，以css（Content-Type:‘text/css’）为例子：

res.writeHeader(200,{'Content-Type':'text/css'});

内嵌资源和下载资源也通过这个发生变化。另外发一份ContentType的不完整的列表。需要注意的是，里面会有重复的，原因是他提供了内嵌和下载2中区别，例如’.jpg’:‘image/jpeg’和’.jpg’:‘application/x-jpg’,前者是资源内嵌，后者是资源下载。

/** * ContentType常量 */ DEFAULT_CONTENT_TYPE = 'application/octet-stream'; //上传类型 UPLOAD_CONTENT_TYPE = 'multipart/form-data';

CONTENT_TYPE = { ‘’:‘application/octet-stream’, ‘.’:‘application/octet-stream’, ‘.’:‘application/octet-stream’, ‘.001’:‘application/x-001’, ‘.301’:‘application/x-301’, ‘.323’:‘text/h323’, ‘.906’:‘application/x-906’, ‘.907’:‘drawing/907’, ‘.a11’:‘application/x-a11’, ‘.acp’:‘audio/x-mei-aac’, ‘.ai’:‘application/postscript’, ‘.aif’:‘audio/aiff’, ‘.aifc’:‘audio/aiff’, ‘.aiff’:‘audio/aiff’, ‘.anv’:‘application/x-anv’, ‘.asa’:‘text/asa’, ‘.asf’:‘video/x-ms-asf’, ‘.asp’:‘text/asp’, ‘.asx’:‘video/x-ms-asf’, ‘.au’:‘audio/basic’, ‘.avi’:‘video/avi’, ‘.awf’:‘application/vnd.adobe.workflow’, ‘.biz’:‘text/xml’, ‘.bmp’:‘application/x-bmp’, ‘.bot’:‘application/x-bot’, ‘.c4t’:‘application/x-c4t’, ‘.c90’:‘application/x-c90’, ‘.cal’:‘application/x-cals’, ‘.cat’:‘application/s-pki.seccat’, ‘.cdf’:‘application/x-netcdf’, ‘.cdr’:‘application/x-cdr’, ‘.cel’:‘application/x-cel’, ‘.cer’:‘application/x-x509-ca-cert’, ‘.cg4’:‘application/x-g4’, ‘.cgm’:‘application/x-cgm’, ‘.cit’:‘application/x-cit’, ‘.class’:'java/’, ‘.cml’:‘text/xml’, ‘.cmp’:‘application/x-cmp’, ‘.cmx’:‘application/x-cmx’, ‘.cot’:‘application/x-cot’, ‘.crl’:‘application/pkix-crl’, ‘.crt’:‘application/x-x509-ca-cert’, ‘.csi’:‘application/x-csi’, ‘.css’:‘text/css’, ‘.cut’:‘application/x-cut’, ‘.dbf’:‘application/x-dbf’, ‘.dbm’:‘application/x-dbm’, ‘.dbx’:‘application/x-dbx’, ‘.dcd’:‘text/xml’, ‘.dcx’:‘application/x-dcx’, ‘.der’:‘application/x-x509-ca-cert’, ‘.dgn’:‘application/x-dgn’, ‘.dib’:‘application/x-dib’, ‘.dll’:‘application/x-msdownload’, ‘.doc’:‘application/msword’, ‘.dot’:‘application/msword’, ‘.drw’:‘application/x-drw’, ‘.dtd’:‘text/xml’, ‘.dwf’:‘Model/vnd.dwf’, ‘.dwf’:‘application/x-dwf’, ‘.dwg’:‘application/x-dwg’, ‘.dxb’:‘application/x-dxb’, ‘.dxf’:‘application/x-dxf’, ‘.edn’:‘application/vnd.adobe.edn’, ‘.emf’:‘application/x-emf’, ‘.eml’:‘message/rfc822’, ‘.ent’:‘text/xml’, ‘.epi’:‘application/x-epi’, ‘.eps’:‘application/x-ps’, ‘.eps’:‘application/postscript’, ‘.etd’:‘application/x-ebx’, ‘.exe’:‘application/x-msdownload’, ‘.fax’:‘image/fax’, ‘.fdf’:‘application/vnd.fdf’, ‘.fif’:‘application/fractals’, ‘.fo’:‘text/xml’, ‘.frm’:‘application/x-frm’, ‘.g4’:‘application/x-g4’, ‘.gbr’:‘application/x-gbr’, ‘.gcd’:‘application/x-gcd’, ‘.gif’:‘image/gif’, ‘.gl2’:‘application/x-gl2’, ‘.gp4’:‘application/x-gp4’, ‘.hgl’:‘application/x-hgl’, ‘.hmr’:‘application/x-hmr’, ‘.hpg’:‘application/x-hpgl’, ‘.hpl’:‘application/x-hpl’, ‘.hqx’:‘application/mac-binhex40’, ‘.hrf’:‘application/x-hrf’, ‘.hta’:‘application/hta’, ‘.htc’:‘text/x-component’, ‘.htm’:‘text/html’, ‘.html’:‘text/html’, ‘.htt’:‘text/webviewhtml’, ‘.htx’:‘text/html’, ‘.icb’:‘application/x-icb’, ‘.ico’:‘image/x-icon’, ‘.ico’:‘application/x-ico’, ‘.iff’:‘application/x-iff’, ‘.ig4’:‘application/x-g4’, ‘.igs’:‘application/x-igs’, ‘.iii’:‘application/x-iphone’, ‘.img’:‘application/x-img’, ‘.ins’:‘application/x-internet-signup’, ‘.isp’:‘application/x-internet-signup’, ‘.IVF’:‘video/x-ivf’, ‘.java’:‘java/*’, ‘.jfif’:‘image/jpeg’,’.jpe’:‘image/jpeg’, ‘.jpe’:‘application/x-jpe’, ‘.jpeg’:‘image/jpeg’, ‘.jpg’:‘image/jpeg’, // ‘.jpg’:‘application/x-jpg’, // ‘.js’:‘application/x-javascript’,//老浏览器不支持 ‘.js’:‘text/javascript’,//老属性//是用老的还是新的，等待测试 ‘.json’:‘text/javascript’,//我自己加的 ‘.jsp’:‘text/html’, ‘.la1’:‘audio/x-liquid-file’, ‘.lar’:‘application/x-laplayer-reg’, ‘.latex’:‘application/x-latex’, ‘.lavs’:‘audio/x-liquid-secure’, ‘.lbm’:‘application/x-lbm’, ‘.lmsff’:‘audio/x-la-lms’, ‘.ls’:‘application/x-javascript’, ‘.ltr’:‘application/x-ltr’, ‘.m1v’:‘video/x-mpeg’, ‘.m2v’:‘video/x-mpeg’, ‘.m3u’:‘audio/mpegurl’, ‘.m4e’:‘video/mpeg4’, ‘.mac’:‘application/x-mac’, ‘.man’:‘application/x-troff-man’, ‘.math’:‘text/xml’, ‘.mdb’:‘application/msaccess’, ‘.mdb’:‘application/x-mdb’, ‘.mfp’:‘application/x-shockwave-flash’, ‘.mht’:‘message/rfc822’, ‘.mhtml’:‘message/rfc822’, ‘.mi’:‘application/x-mi’, ‘.mid’:‘audio/mid’, ‘.midi’:‘audio/mid’, ‘.mil’:‘application/x-mil’, ‘.mml’:‘text/xml’, ‘.mnd’:‘audio/x-musicnet-download’, ‘.mns’:‘audio/x-musicnet-stream’, ‘.mocha’:‘application/x-javascript’, ‘.movie’:‘video/x-sgi-movie’, ‘.mp1’:‘audio/mp1’, ‘.mp2’:‘audio/mp2’, ‘.mp2v’:‘video/mpeg’, ‘.mp3’:‘audio/mp3’, ‘.mp4’:‘video/mp4’, ‘.mpa’:‘video/x-mpg’, ‘.mpd’:‘application/-project’, ‘.mpe’:‘video/x-mpeg’, ‘.mpeg’:‘video/mpg’, ‘.mpg’:‘video/mpg’, ‘.mpga’:‘audio/rn-mpeg’, ‘.mpp’:‘application/-project’, ‘.mps’:‘video/x-mpeg’, ‘.mpt’:‘application/-project’, ‘.mpv’:‘video/mpg’, ‘.mpv2’:‘video/mpeg’, ‘.mpw’:‘application/s-project’, ‘.mpx’:‘application/-project’, ‘.mtx’:‘text/xml’, ‘.mxp’:‘application/x-mmxp’, ‘.net’:‘image/pnetvue’, ‘.nrf’:‘application/x-nrf’, ‘.nws’:‘message/rfc822’, ‘.odc’:‘text/x-ms-odc’, ‘.out’:‘application/x-out’, ‘.p10’:‘application/pkcs10’, ‘.p12’:‘application/x-pkcs12’, ‘.p7b’:‘application/x-pkcs7-certificates’, ‘.p7c’:‘application/pkcs7-mime’, ‘.p7m’:‘application/pkcs7-mime’, ‘.p7r’:‘application/x-pkcs7-certreqresp’, ‘.p7s’:‘application/pkcs7-signature’, ‘.pc5’:‘application/x-pc5’, ‘.pci’:‘application/x-pci’, ‘.pcl’:‘application/x-pcl’, ‘.pcx’:‘application/x-pcx’, ‘.pdf’:‘application/pdf’, ‘.pdf’:‘application/pdf’, ‘.pdx’:‘application/vnd.adobe.pdx’, ‘.pfx’:‘application/x-pkcs12’, ‘.pgl’:‘application/x-pgl’, ‘.pic’:‘application/x-pic’, ‘.pko’:‘application-pki.pko’, ‘.pl’:‘application/x-perl’, ‘.plg’:‘text/html’, ‘.pls’:‘audio/scpls’, ‘.plt’:‘application/x-plt’, ‘.png’:‘image/png’, // ‘.png’:‘application/x-png’, ‘.pot’:‘applications-powerpoint’, ‘.ppa’:‘application/vs-powerpoint’, ‘.ppm’:‘application/x-ppm’, ‘.pps’:‘application-powerpoint’, ‘.ppt’:‘applications-powerpoint’, ‘.ppt’:‘application/x-ppt’, // ‘.pr’:‘application/x-pr’, ‘.prf’:‘application/pics-rules’, ‘.prn’:‘application/x-prn’, ‘.prt’:‘application/x-prt’, ‘.ps’:‘application/x-ps’, ‘.ps’:‘application/postscript’, ‘.ptn’:‘application/x-ptn’, ‘.pwz’:‘application/powerpoint’, ‘.r3t’:‘text/vnd.rn-realtext3d’, ‘.ra’:‘audio/vnd.rn-realaudio’, ‘.ram’:‘audio/x-pn-realaudio’, ‘.ras’:‘application/x-ras’, ‘.rat’:‘application/rat-file’, ‘.rdf’:‘text/xml’, ‘.rec’:‘application/vnd.rn-recording’, ‘.red’:‘application/x-red’, ‘.rgb’:‘application/x-rgb’, ‘.rjs’:‘application/vnd.rn-realsystem-rjs’, ‘.rjt’:‘application/vnd.rn-realsystem-rjt’, ‘.rlc’:‘application/x-rlc’, ‘.rle’:‘application/x-rle’, ‘.rm’:‘application/vnd.rn-realmedia’, ‘.rmf’:‘application/vnd.adobe.rmf’, ‘.rmi’:‘audio/mid’, ‘.rmj’:‘application/vnd.rn-realsystem-rmj’, ‘.rmm’:‘audio/x-pn-realaudio’, ‘.rmp’:‘application/vnd.rn-rn_music_package’, ‘.rms’:‘application/vnd.rn-realmedia-secure’, ‘.rmvb’:‘application/vnd.rn-realmedia-vbr’, ‘.rmx’:‘application/vnd.rn-realsystem-rmx’, ‘.rnx’:‘application/vnd.rn-realplayer’, ‘.rp’:‘image/vnd.rn-realpix’, ‘.rpm’:‘audio/x-pn-realaudio-plugin’, ‘.rsml’:‘application/vnd.rn-rsml’, ‘.rt’:‘text/vnd.rn-realtext’, ‘.rtf’:‘application/msword’, ‘.rtf’:‘application/x-rtf’, ‘.rv’:‘video/vnd.rn-realvideo’, ‘.sam’:‘application/x-sam’, ‘.sat’:‘application/x-sat’, ‘.sdp’:‘application/sdp’, ‘.sdw’:‘application/x-sdw’, ‘.sit’:‘application/x-stuffit’, ‘.slb’:‘application/x-slb’, ‘.sld’:‘application/x-sld’, ‘.slk’:‘drawing/x-slk’, ‘.smi’:‘application/smil’, ‘.smil’:‘application/smil’, ‘.smk’:‘application/x-smk’, ‘.snd’:‘audio/basic’, ‘.sol’:‘text/plain’, ‘.sor’:‘text/plain’, ‘.spc’:‘application/x-pkcs7-certificates’, ‘.spl’:‘application/futuresplash’, ‘.spp’:‘text/xml’, ‘.ssm’:‘application/streamingmedia’, ‘.sst’:‘application-pki.certstore’, ‘.stl’:‘application/-pki.stl’, ‘.stm’:‘text/html’, ‘.sty’:‘application/x-sty’, ‘.svg’:‘text/xml’, ‘.swf’:‘application/x-shockwave-flash’, ‘.tdf’:‘application/x-tdf’, ‘.tg4’:‘application/x-tg4’, ‘.tga’:‘application/x-tga’, ‘.tif’:‘image/tiff’, ‘.tif’:‘application/x-tif’, ‘.tiff’:‘image/tiff’, ‘.tld’:‘text/xml’, ‘.top’:‘drawing/x-top’, ‘.torrent’:‘application/x-bittorrent’, ‘.tsd’:‘text/xml’, ‘.txt’:‘text/plain’, ‘.uin’:‘application/x-icq’, ‘.uls’:‘text/iuls’, ‘.vcf’:‘text/x-vcard’, ‘.vda’:‘application/x-vda’, ‘.vdx’:‘application/vnd.visio’, ‘.vml’:‘text/xml’, ‘.vpg’:‘application/x-vpeg005’, ‘.vsd’:‘application/vnd.visio’, ‘.vsd’:‘application/x-vsd’, ‘.vss’:‘application/vnd.visio’, ‘.vst’:‘application/vnd.visio’, ‘.vst’:‘application/x-vst’, ‘.vsw’:‘application/vnd.visio’, ‘.vsx’:‘application/vnd.visio’, ‘.vtx’:‘application/vnd.visio’, ‘.vxml’:‘text/xml’, ‘.wav’:‘audio/wav’, ‘.wax’:‘audio/x-ms-wax’, ‘.wb1’:‘application/x-wb1’, ‘.wb2’:‘application/x-wb2’, ‘.wb3’:‘application/x-wb3’, ‘.wbmp’:‘image/vnd.wap.wbmp’, ‘.wiz’:‘application/msword’, ‘.wk3’:‘application/x-wk3’, ‘.wk4’:‘application/x-wk4’, ‘.wkq’:‘application/x-wkq’, ‘.wks’:‘application/x-wks’, ‘.wm’:‘video/x-ms-wm’, ‘.wma’:‘audio/x-ms-wma’, ‘.wmd’:‘application/x-ms-wmd’, ‘.wmf’:‘application/x-wmf’, ‘.wml’:‘text/vnd.wap.wml’, ‘.wmv’:‘video/x-ms-wmv’, ‘.wmx’:‘video/x-ms-wmx’, ‘.wmz’:‘application/x-ms-wmz’, ‘.wp6’:‘application/x-wp6’, ‘.wpd’:‘application/x-wpd’, ‘.wpg’:‘application/x-wpg’, ‘.wpl’:‘application/-wpl’, ‘.wq1’:‘application/x-wq1’, ‘.wr1’:‘application/x-wr1’, ‘.wri’:‘application/x-wri’, ‘.wrk’:‘application/x-wrk’, ‘.ws’:‘application/x-ws’, ‘.ws2’:‘application/x-ws’, ‘.wsc’:‘text/scriptlet’, ‘.wsdl’:‘text/xml’, ‘.wvx’:‘video/x-ms-wvx’, ‘.xdp’:‘application/vnd.adobe.xdp’, ‘.xdr’:‘text/xml’, ‘.xfd’:‘application/vnd.adobe.xfd’, ‘.xfdf’:‘application/vnd.adobe.xfdf’, ‘.xhtml’:‘text/html’, ‘.xls’:‘application/-excel’, ‘.xls’:‘application/x-xls’, ‘.xlw’:‘application/x-xlw’, ‘.xml’:‘text/xml’, ‘.xpl’:‘audio/scpls’, ‘.xq’:‘text/xml’, ‘.xql’:‘text/xml’, ‘.xquery’:‘text/xml’, ‘.xsd’:‘text/xml’, ‘.xsl’:‘text/xml’, ‘.xslt’:‘text/xml’, ‘.xwd’:‘application/x-xwd’, ‘.x_b’:‘application/x-x_b’, ‘.x_t’:‘application/x-x_t’ }

wuwangju 7楼

谢谢啊，昨晚搞定了，呵呵

ionicwang 8楼作者

content type大全啊……

yibo5220 9楼

果断收藏上面的content type大全

eggper 10楼

好长的 mime, 为什么不直接用现成模块啊? https://github.com/broofa/node-mime/blob/master/types/mime.types

htzhanglong 11楼

这个比我的还长。。。

ionicwang 12楼作者

我是初学者，教我的大哥要求我先不用框架做个服务器，我想问下，像楼主问的那个问题怎么解决？？就是一个网页有用到css、js，但是出来的界面都是没有css与js效果的。麻烦各位大大了

yuanlaile 13楼

顶，遇到同样问题是懵逼的。 index.html要包含外部css、js <script type=“text/javascript” src="./a.js"></script>的写法不行。。。不知道咋搞路由

songsunli 14楼

//------------------------------------------------ // 利用nodejs搭建一个简单的Web服务器 //------------------------------------------------

//启动计时器，记录启动服务所花费的时间 console.time(‘start WebServer need time’);

//请求模块 var libHttp = require(‘http’); //HTTP协议模块 var libUrl = require(‘url’); //URL解析模块 var libFs = require(“fs”); //文件系统模块 var libPath = require(“path”); //路径解析模块

//依据路径获取返回内容类型字符串,用于http响应头 var funGetContentType = function (filePath) { var contentType = “”;

//使用路径解析模块获取文件扩展名 
var ext = libPath.extname(filePath);
switch (ext) {
case “.html”:
contentType = “text/html”;
break;
case “.js”:
contentType = “text/javascript”;
break;
case “.css”:
contentType = “text/css”;
break;
case “.gif”:
contentType = “image/gif”;
break;
case “.jpg”:
contentType = “image/jpeg”;
break;
case “.png”:
contentType = “image/png”;
break;
case “.ico”:
contentType = “image/icon”;
break;
default:
contentType = “application/octet-stream”;
}
//返回内容类型字符串
return contentType;

}

//Web服务器主函数,解析请求,返回Web内容 var funWebSvr = function (req, res) { //获取请求的url var reqUrl = req.url;

//向控制台输出请求的路径 
console.log(reqUrl);
//使用url解析模块获取url中的路径名
var pathName = libUrl.parse(reqUrl).pathname;

if (libPath.extname(pathName) == “”) {
//如果路径没有扩展名
pathName += “/”; //指定访问目录
}
if (pathName.charAt(pathName.length - 1) == “/”) {
//如果访问目录
pathName += “index.html”; //指定为默认网页
}
//使用路径解析模块,组装实际文件路径
var filePath = libPath.join("./", pathName);
//判断文件是否存在
libFs.exists(filePath, function (exists) {
//文件存在
if (exists) {
//在响应头中写入内容类型
res.writeHead(200, { “Content-Type”: funGetContentType(filePath) });
    //创建只读流用于返回 
    var stream = libFs.createReadStream(filePath, { flags: "r", encoding: null });
    
    //指定如果流读取错误,返回404错误 
    stream.on("error", function () {
        res.writeHead(404);
        res.end("&lt;h1&gt;404 Read Error&lt;/h1&gt;");
    });
    
    //连接文件流和http返回流的管道,用于返回实际Web内容 
    stream.pipe(res);
}
else {
    //文件不存在，返回404错误 
    res.writeHead(404, { "Content-Type": "text/html" });
    res.end("&lt;h1&gt;404 Not Found&lt;/h1&gt;");
}
});

}

//创建一个http服务器 var webSvr = libHttp.createServer(funWebSvr);

//指定服务器错误事件响应 webSvr.on(“error”, function (error) { //在控制台中输出错误信息 console.log(error); });

//开始侦听8124端口 webSvr.listen(8124, function () { //向控制台输出服务启动的信息 console.log(‘WebServer running at http://127.0.0.1:8124/’);

//关闭服务启动计时器
console.timeEnd('start WebServer need time');

});

caililin 15楼

5年前的沉帖诈尸啊… 楼上的回答作为一个雏形是可以的，实际使用是有问题的，最需要处理的就是缓存问题；话说web框架都有各种静态server中间件…

yuanlaile 16楼

为了使你的 Node.js 服务器能够正确提供 index.html 及其依赖的 JavaScript 和 CSS 文件（如 Lib.js），你需要对你的服务器端代码进行一些调整。以下是具体的实现步骤：

设置静态资源目录：你可以使用第三方模块如 express 或者 http-server 来简化处理静态文件的过程，但这里我们仅使用原生的 Node.js 模块来演示。
修改你的服务器端代码：确保根据请求路径动态加载文件，而不是硬编码到特定文件。下面是一个简单的实现方法：

const http = require('http');
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1';
const port = 8080;

const server = http.createServer((req, res) => {
    const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);

    // 设置正确的 MIME 类型
    const contentType = getContentType(filePath);
    
    fs.access(filePath, fs.constants.F_OK, (err) => {
        if (err) {
            res.writeHead(404, { 'Content-Type': 'text/plain' });
            res.end('Not Found');
            return;
        }

        fs.readFile(filePath, (err, data) => {
            if (err) {
                res.writeHead(500, { 'Content-Type': 'text/plain' });
                res.end('Internal Server Error');
                return;
            }

            res.writeHead(200, { 'Content-Type': contentType });
            res.end(data);
        });
    });
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

// 辅助函数：根据文件扩展名确定 MIME 类型
function getContentType(filePath) {
    const extname = String(path.extname(filePath)).toLowerCase();
    switch (extname) {
        case '.js':
            return 'text/javascript';
        case '.css':
            return 'text/css';
        default:
            return 'text/html';
    }
}

这段代码做了以下几件事：

使用 path 模块拼接完整的文件路径。
判断文件是否存在，如果不存在返回 404 错误。
读取文件内容并根据文件类型设置响应头 Content-Type，以正确显示文件内容。
提供了一个辅助函数 getContentType 来根据文件扩展名自动设置响应头的 Content-Type 值。

这样配置后，当你访问 localhost:8080 时，将能够看到 index.html 文件，并且浏览器会尝试加载该 HTML 中引用的所有静态资源（如 Lib.js）。