【发布时间】：2017-05-22 06:59:45
【问题描述】：
当我在生产服务器上运行捆绑的 React 应用程序时，它找不到我的图像文件，我不知道为什么。我很确定这与我的 node express 配置和/或我的.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 中，在 script 标签中被引用。我不确定如何让我的应用程序识别 /img 文件夹，因为目前它还没有。
这是我的文件结构：
- static
- css
- main.css
- js
- bundle.js
- img (contains all image files)
但是，当我运行该应用程序并在 Chrome 控制台中打开“源”时，未提供 /img 文件。
我认为这行表明 express 服务于 /static 文件夹中的所有内容...
app.use('/static', express.static(__dirname + '/static'));
...但只有三分之二的文件被提供。
如果有人能告诉我我的设置哪里出了问题，我将不胜感激。
提前致谢。
【问题讨论】：
-
你的js/css加载成功了吗？
-
是的，这两个都很好。
-
/img 不存在，它将是 /static/img - 或者我错过了什么？
-
是的，它是
static/img，但我认为应该提供static文件夹中的所有内容，包括所有子文件夹，其中一个是/img...错了吗？ -
您实际上并没有加载任何图像文件吗？然后它不会显示在“源”选项卡中。
标签： node.js reactjs express server ejs