如何让 Node.js 为我的 HTML 引用 CSS

Question

我正在尝试在 JS 中创建像 EU4 这样的回合制策略游戏。我想包含多人游戏功能，但我想了解为什么这种情况不断发生：当我通过节点运行我的应用程序时，它似乎只显示纯 HTML 而不是 CSS。请帮忙。

下面的代码：

var express = require('express')

var app = express()

var serv = require('http').Server(app)

var port = 2000

app.get('/', function(req, res) {

    res.sendFile(__dirname + '/client/index.html')

})

app.use('/client', express.static(__dirname + '/client'))

serv.listen(port)

console.log('Colonial Warfare server => initialized!')

console.log('CWserver HostPort: ' + port)

var io = require('socket.io') (serv,{})

io.sockets.on('connection', function(socket) {

    console.log('socket connection')

})

Answer 1

您需要通过将 index.html 的 get 替换为以下行来提供静态 CSS 文件：app.use(express.static('public'))如果 CSS 位于 index.HTML 旁边，请将“public”更改为“client”。详细信息： https ://expressjs.com/en/starter/static-files.html- 编辑 -由于 index.html 包含诸如“/css/filename.css”之类的 css，因此您必须像这样托管它： app.use(express.static('css')) 或者您将对样式表的引用更改为 /client/ html 文件中的 css/filename.css。每当您访问（对于 express 的）未知路径时，express 都会返回 index.html 文件。

Answer 2

当您的浏览器发送 http 请求“/”时，您会返回链接到“/css/gameStyle.css”的 html。您可以将您的 css 文件夹移动到客户端文件夹并将链接更改为“/client/css/gameStyle.css”。或者您可以在节点应用程序上提供您的 css 文件夹app.use(express.static('css'))