Node.js的为什么页面无法加载css和javascript文件？

Question

我创建了一个node.js服务器。 当我使用端口3000进入localhost时，它只显示没有css或javascript的文本。 我尝试过几种可以解决其他问题的解决方案。 但他们没有为我工作。

Node JS不断加载资源错误消息

使用express.js的静态文件

无法获取CSS文件

我的文件顺序是这样的

server.js
index.html
 public
  css
   style.css

这是服务器的代码

var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');});
app.use(express.static(__dirname + 'public'));
app.listen(3000);

这些是错误

GET http://localhost:3000/ [HTTP/1.1 304 Not Modified 11ms]
GET http://localhost:3000/public/css/demo.css [HTTP/1.1 404 Not Found 10ms]
GET http://localhost:3000/public/css/themes/popclip.css [HTTP/1.1 404 Not Found 10ms]
GET http://localhost:3000/public/css/reveal.min.css [HTTP/1.1 404 Not Found 19ms]
GET http://localhost:3000/public/css/theme/default.css [HTTP/1.1 404 Not Found 12ms]
GET http://localhost:3000/public/css/jquery.dropdown.css [HTTP/1.1 404 Not Found 11ms]
GET http://localhost:3000/node_modules/socket.io/node_modules/socket.io-client/socket.io.js [HTTP/1.1 404 Not Found 10ms]
GET http://localhost:3000/public/js/jquery.min.js [HTTP/1.1 404 Not Found 29ms]
GET http://localhost:3000/public/js/jquery.popline.js [HTTP/1.1 404 Not Found 28ms]
GET http://localhost:3000/public/js/plugins/jquery.popline.link.js [HTTP/1.1 404 Not Found 28ms]

Answer 1

这个：

__dirname + 'public'

应该：

__dirname + '/public'

此外，您的html / css中的路径可能不正确，因为__dirname + '/public'将是您的根 。 因此，除非您有一个目录__dirname + '/public/public' ，否则您将需要更改html / css中的路径。

Answer 2

问题解决了。

问题出在我的index.html文件中。 最初我以为当我创建一个新文件夹并放入所有css和js文件时，我需要在所有src中添加'public'。 像这样

<script src="public/js/jquery.min.js"></script>
<script src="public/js/jquery.popline.js"></script>

但相反，我只需要在没有像这样的'public'文件夹的情况下这样做

<script src="js/jquery.min.js"></script>
<script src="js/jquery.popline.js"></script>

并将__dirname + 'public'到__dirname + '/public'就像mscdex建议的那样。

Answer 3

在尝试了几个项目之后，我只是想列出我的工作成果，以防它帮助其他人。

我曾尝试但未能为我工作的代码行：

app.use('/css', express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/public'));
app.use(express.static(path.join(__dirname, '../public')));

我的项目位于'project'文件夹中，其中包含'public'文件夹，'views'文件夹和server.js文件。 Node，Express和Handlebars用于渲染页面。 在'public'中是一个文件夹'css'，我的style.css文件已保存在其中。

在我使用的server.js上

var express = require('express');
var app = express();
app.use(express.static('public'));

在我的main.handlebars文件的'views'>'layouts'中，我在该部分中有

<link rel="stylesheet" href="/css/style.css">

有了这些，启动本地实例工作，加载样式表时没有'404'错误消息。