express js不提供静态文件答案

【问题标题】：express js not serving static filesexpress js不提供静态文件
【发布时间】：2016-12-30 13:15:09
【问题描述】：

我意识到这是一个典型的问题，但在阅读了类似的问题之后，我无法找到任何解决方案来正常工作并使用 express 正确地提供我的静态文件。

我的应用文件夹结构如下：

..
-bin
-lib
-run
-etc
-node-modules
-public
--css
---styles.css
---svg.css
--images
---Loading.gif
--javascript
---nav.js
--favicon.ico
--index.html
app.js

我的 app.js 应该使用 express 创建一个服务器，并在“public”文件夹中提供静态文件。但它似乎只找到'index.html'。它看起来像这样：

var express = require('express');
var path = require('path');
var app = express();

app.set('port', 13245);
app.use(express.static(path.join(__dirname, 'public')));

var server = app.listen(app.get('port'), function() {
    var port = server.address().port;
    console.log('Welcome to the planet on port : ' + port);
});

最后，我的 index.html 文件有这样的标题：

<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="apple-touch-icon" sizes="120x120" href="images/Loading.gif"/>
<link rel="apple-touch-icon" sizes="152x152" href="images/Loading.gif"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">//JQuery</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">//Bootstrap min</script>
<script src="javascript/nav.js"></script>
</head>

但似乎没有提供 css 和 js 文件。可能是我，但我看不出我做错了什么，所以只是想知道。

我得到的错误是

GET example.com/css/styles.css 404 (Not Found)
GET example.com/javascript/nav.js

【问题讨论】：

src="./javascript/nav.js" 有效吗？ --- 您正在浏览 mysite.com/public/index 吗？或 mysite.com/index
使用您的确切设置，如果我转到http://localhost:13245/css/styles.css，我将看到该文件的内容。当你这样做时会发生什么？
嗨@Cody G.，'./' 也不起作用。我目前正在浏览“mysite.com/index”。重新生成的 404 错误类似于：'mysite.com/css/styles.css'

标签： javascript node.js express

【解决方案1】：

我的设置和你类似。我的 app.js 文件与我的公用文件夹位于同一文件夹中。这对我有用。

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

我认为您不需要 __dirname 并加入，因为 __dirname 引用了当前脚本运行所在的目录，但公用文件夹已经在您的根目录中。

【讨论】：

【解决方案2】：

感谢您的回答。我通过在 url 中添加我的应用程序所在的文件夹路径解决了这个问题。

所以

.MyAppFolder
-bin
-lib
-run
-etc
-node-modules
-public
--css
---styles.css
---svg.css
--images
---Loading.gif
--javascript
---nav.js
--favicon.ico
--index.html
app.js

我刚刚拥有相同的 app.js 文件

var express = require('express');
var path = require('path');
var app = express();

app.set('port', 13245);
app.use(express.static(path.join(__dirname, 'public')));

var server = app.listen(app.get('port'), function() {
    var port = server.address().port;
    console.log('Welcome to the planet on port : ' + port);
});

index.html文件中的url是这样的：

<link rel="stylesheet" href="/MyAppFolder/css/styles.css" />

问题解决了！ ;)

【讨论】：

这当然很奇怪。 . . !

【解决方案3】：

在你的 css 和 js 文件的路径之前添加这个 /，这样你的链接应该是这样的：

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

希望对你有帮助

【讨论】：

好吧，它可以在不添加你的应用程序路径的情况下工作。主要是关于在路径中添加“/”。但是写下你自己的答案并将其标记为正确的答案当然是最好的做法......

【解决方案4】：

您可以将base href 添加到您的 HTML 文档头部。

<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<base href="http://localhost:13245" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="apple-touch-icon" sizes="120x120" href="images/Loading.gif"/>
<link rel="apple-touch-icon" sizes="152x152" href="images/Loading.gif"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">//JQuery</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">//Bootstrap min</script>
<script src="javascript/nav.js"></script>
</head>

【讨论】：