表达js不提供静态文件
[英]express js not serving static files
问题描述
I realise that this is a typical question yet after reading similar issues I could not get any solution to work and properly serve my static files with express. 
我意识到这是一个典型的问题，但是在阅读了类似的问题后，我无法获得任何解决方案来正常工作并正确地为我的静态文件提供快递服务。
My app folder structure looks like this: 我的应用程序文件夹结构如下所示：
..
-bin
-lib
-run
-etc
-node-modules
-public
--css
---styles.css
---svg.css
--images
---Loading.gif
--javascript
---nav.js
--favicon.ico
--index.html
app.js
My app.js should create a server with express and serve the static files in the 'public' folder. 我的app.js应该使用express创建服务器并在“ public”文件夹中提供静态文件。 But it seems to only find the 'index.html'.It looks like this: 但似乎只能找到'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);
});
Finally, my index.html file has a header like this: 最后，我的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>
but css and js files do not seem to be served. 但似乎没有提供CSS和JS文件。 It may be me but I don't see what I did wrong so just wondering. 可能是我，但我看不出我做错了什么，所以只是想知道。
the errors I get are 我得到的错误是
GET example.com/css/styles.css 404 (Not Found)
GET example.com/javascript/nav.js
4 个解决方案
解决方案1
2 已采纳 2016-12-31 17:09:39
Thanks for your answers. 感谢您的回答。 I solved this issue by adding the folder path where my application was in the urls. 我通过添加应用程序在url中的文件夹路径解决了此问题。
So for 因此对于
.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
I just had the same app.js file 我只是有相同的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);
});
and urls in the index.html file are like this: 和index.html文件中的网址是这样的：
<link rel="stylesheet" href="/MyAppFolder/css/styles.css" />
Problem solved! 问题解决了！ ;) ;）
解决方案2
1 2016-12-30 13:38:47
I have a similar setup as you. 我的设置与您类似。 My app.js file is in the same folder as my public folder. 我的app.js文件与我的公用文件夹位于同一文件夹中。 And this works for me. 这对我有用。
app.use(express.static('public'));
I don't think you need the __dirname and join, since __dirname references the directory that the current script is running from, but the public folder is already in your root directory. 我认为您不需要__dirname并加入，因为__dirname引用了当前脚本正在运行的目录，但是公用文件夹已经在您的根目录中。
解决方案3
1 2016-12-30 22:16:36
Sipmly add this / before ur path to css and js files so ur link should look like this: 只需在您的css和js文件路径之前添加此/，那么您的链接应如下所示：
<link rel="stylesheet" href="/css/styles.css" />
I hope that will help 我希望这会有所帮助
解决方案4
0 2019-03-07 04:00:22
You can add a base href to you HTML document head. 您可以在HTML文档头中添加基本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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.