使用 nodejs 时，遇到了一个问题，求助大家

node 版本：16.13.2

问题描述：

我在 server.js 中使用 fs.readFileSync 去读取一个 html 文件，然后用 response.end(html) 返回结果。

问题来了，如果 html 文件中 js 和 css 分别采用 <script> 标签和 <style> 标签引用，那么返回到页面的效果

正常；如果 js 和 css 都采用外部引入方式，那么样式和逻辑都不会被返回，这是为什么呢？

以下是 server.js 和 index.html

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

const server = http.createServer((req, res) => {
let { pathname } = new URL(req.url, 'http://127.0.0.1')
if (pathname === '/index.html') {
let html = fs.readFileSync('./page/index.html')
res.end(html)
}
})

server.listen(9000, () => {
console.log('server is runing......');
})

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
td {
padding: 20px 40px;
}

table tr:nth-child(odd) {
background-color: #aef;
}

table tr:nth-child(even) {
background-color: #fcb;
}

table,
td {
border-collapse: collapse;
}
</style>
</head>

<body>
<h1>你好呀 111</h1>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>

<script>
const tds = document.querySelectorAll('td')
tds.forEach(item => {
item.onclick = function () {
this.style.background = '#222'
}
})
</script>

</html>

这是正常的显示样式

而当我把 css 和 js 使用外部引入的方式就出问题了

点击×号取消后，是如下样子

zhangxh1023

2023-08-24 09:20:08 +08:00

比如：你引入了 `./js/index.js` ，那么浏览器会像你的当前网址的相对路径，请求资源 `index.js`,你可以在 network 里面看到请求的目标地址，应该是: `http://xxxx:9000/js/index.js`, 如果你的服务端没有返回对应的 js 文件，就不行了。

你应该搜索一下: web 静态资源服务器

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/967827