表達js不提供靜態文件
[英]express js not serving static files
問題描述
我意識到這是一個典型的問題，但是在閱讀了類似的問題后，我無法獲得任何解決方案來正常工作並正確地為我的靜態文件提供快遞服務。
我的應用程序文件夾結構如下所示：
..
-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
4 個解決方案
解決方案1
2 已采納 2016-12-31 17:09:39
感謝您的回答。 我通過添加應用程序在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
1 2016-12-30 13:38:47
我的設置與您類似。 我的app.js文件與我的公用文件夾位於同一文件夾中。 這對我有用。
app.use(express.static('public'));
我認為您不需要__dirname並加入，因為__dirname引用了當前腳本正在運行的目錄，但是公用文件夾已經在您的根目錄中。
解決方案3
1 2016-12-30 22:16:36
只需在您的css和js文件路徑之前添加此/，那么您的鏈接應如下所示：
<link rel="stylesheet" href="/css/styles.css" />
我希望這會有所幫助
解決方案4
0 2019-03-07 04:00:22
您可以在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>
Express js不提供靜態文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.