节点快递服务器不提供图片文件夹
当我在生产服务器上运行我的捆绑React应用程序时,它找不到我的图像文件,我不知道为什么。 我相当确定这是有关我的节点快递configuration和/或我的.ejs
模板文件。
server.js
var express = require('express') var app = express(); const path = require('path'); app.use('/static', express.static(__dirname + '/static')); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.get('*', function (req, res) { res.render("index"); }); const port = process.env.PORT || 3000; const env = process.env.NODE_ENV || 'production'; app.listen(port, err => { if (err) { return console.error(err); } console.info(`Server running on http://localhost:${port} [${env}]`); });
index.ejs
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Production Server</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=BenchNine" rel="stylesheet"> <link rel="stylesheet" href="../static/css/main.css"> </head> <body> <div id="root"></div> <script src="../static/js/bundle.js"></script> </body> </html>
我的CSS样式表在模板文件中被调用,并且所有的JS被捆绑到脚本标签中引用的bundle.js
中。 我不知道如何让我的应用程序识别/img
文件夹,但目前它不。
这是我的文件结构:
- static - css - main.css - js - bundle.js - img (contains all image files)
但是,当我运行该应用程序时,我在Chrome控制台中打开“来源”,则/ img文件未被投放。
我认为这一行表明,快递服务/static
文件夹中的一切…
app.use('/static', express.static(__dirname + '/static'));
…三个文件中只有两个正在服务。
如果有人能告诉我我的设置出了什么问题,我会大加赞赏。
提前致谢。
DevTools中的source标签只会显示浏览器在index.ejs中使用的内容,只能使用.js和.css文件
在Index.ejs中你正在加载
<script src="../static/js/bundle.js"></script>
和<link rel="stylesheet" href="../static/css/main.css">
这意味着中间件app.use('/static', express.static(__dirname + '/static'));
会检查/js/bundle.js
和/css/main.css
是否存在于静态文件夹中,如果是的话,它会提供服务,如果没有,那么会给文件或文件夹找不到。
这意味着无论您将从index.ejs中的静态文件夹加载,还是仅在index.ejs中使用,内容和文件将出现在“源”选项卡中。 尝试从静态文件夹添加index.ejs中的图像,然后查看源选项卡
或删除<script src="../static/js/bundle.js"></script>
并查看源代码标签,您将不会看到JS文件夹,因为它没有被index.ejs使用
总是重新加载服务器