Question

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

我的app文件夹结构如下所示：

..
-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

Answer 1

感谢您的回答。我通过添加应用程序在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" />

问题解决了！ ;）

Answer 2

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

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

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

Answer 3

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

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

我希望这会有所帮助

Answer 4

您可以在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>

表达js不提供静态文件

4 个答案: