在Node.js中加载客户端Javascript和CSS

Load client Javascript and CSS in Node.js

本文关键字：Javascript CSS 客户端 加载 Node js      更新时间：2023-09-26

我想在我的html文件中加载客户端javascript chat.js和css style.css，但我在加载它们时得到404错误。

这是我的服务器文件: 
// routing
app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

这是我的客户端html:

<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="chat.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">

我如何在我的应用程序中加载它们?所有文件都在同一个根文件夹中。我试过这个，但它不工作:

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/chat.js');
});

看起来你正在使用express web框架，所以在这种情况下，你应该使用express静态中间件。

我在下面做了一个例子。

下面是服务器server.js文件:

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(4040, function() {
  console.log('server up and running');
});

您可以看到Express正在提供位于public目录上的文件。您可以看到，我没有为/提供路由，因为浏览器会自动抓取index.html。

public/index.html:

<!doctype html>
<html>
  <head>
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
    <h1>Hey</h1>
    <script src="app.js"></script>
  </body>
</html>

从浏览器的角度来看，他只知道index.html, app.js和style.css文件，因为它们是由express提供的。

public/style.css:

body {                                                          
    background: red;                                            
}

public/app.js 

document.addEventListener('DOMContentLoaded', function() {
  alert('hello world');
});
相关文章：