投放HTML文件的Node.js找不到引用的文件

Question

我正在尝试使用Node.js和HTML制作一个简单的游戏。 我希望能够在本地运行游戏（因此是localhost）。 但是，当我启动Node服务器时，仅呈现HTML内容-我的图像没有显示并且JS未加载。 我在HTML代码中引用了JavaScript文件，CSS文件和图像。 不知道为什么服务器无法从HTML内引用这些内容。

这是我的服务器代码：

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

//Set port number:
const port = 3000

const requestHandler = (request, response) => {
    console.log(request.url)

    response.writeHead(200, {"Content-Type": "text/html"});
    response.end(fs.readFileSync('game.html'));

}

const server = http.createServer(requestHandler)
server.listen(port, (err) => {
    if (err) {
        return console.log('Error: ', err);
    }

    console.log(`Game started\nGo to http://localhost:3000 to play\n`);
    console.log(`Server is listening on ${port}...`);
})

谁能告诉我如何加载图像/ JS？ TIA

Answer 1

您需要静态处理程序以返回静态内容。 检查此https://www.pabbly.com/tutorials/node-js-http-module-serving-static-files-html-css-images/ 。

另外，如果您的应用程序将变得庞大，则可以使用某些中间件，例如Express。 （ https://expressjs.com/ ）

Answer 2

您没有正确提供静态内容（即图像，CSS）。 考虑一下当浏览到http://localhost:3000/some_image.png时会发生http://localhost:3000/some_image.png -将向他们提供game.html！

您需要考虑用户在requestHandler请求该内容的问题，例如，使用fs.readFileSync(request.url)读取他们想要的文件。 切记检查它们是否只能请求您希望它们能够读取的文件！

Answer 3

如果使用快速框架，则可以使用静态渲染：

app.use(express.static('public'));

其中“ public”是文件夹名称