logo标签列表

Express JS不能提供静态文件服务。

javascriptnode.jsexpress
3

我知道这是一个典型的问题，但在阅读了类似的问题后，我无法找到任何解决方案来使用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？ - Cody Ｇ
使用您的确切设置，如果我转到“http://localhost:13245/css/styles.css”，我将看到该文件的内容。您这样做时会发生什么？ - user5734311
嗨，@Cody G.，'./' 也不起作用。我目前正在 'mysite.com/index' 上浏览。返回的 404 错误如下所示：'mysite.com/css/styles.css'。 - compmonks
4个回答
2

我和你的设置类似。我的app.js文件与public文件夹在同一目录下。这对我来说是有效的。

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

我认为您不需要使用__dirname和join函数，因为__dirname引用当前脚本正在运行的目录，而public文件夹已经在您的根目录中。

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文件中，网址的格式如下：

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

问题解决了！ ;)
2
那肯定很奇怪. . . ! - Cody Ｇ
1

只需要在你的css和js文件路径前面添加 / 即可，这样你的链接应该是这样的：

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

我希望那会有所帮助。

好的，不添加应用程序路径也可以运行。主要是在路径中添加“/”。但是编写自己的答案并将其标记为正确的答案，而忽略我的答案当然是最佳实践... - JSEvgeny
0

您可以在HTML文档头部添加base href。

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接