Question

当我在生产服务器上运行捆绑的React应用程序时，它无法找到我的图像文件，而且我不确定原因。我很确定它与我的节点快速配置和/或我的.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)

然而，当我运行应用程序时，我打开了“来源”＃39;在Chrome控制台中，未提供/ img文件。

我认为这一行表明express代表了/static文件夹中的所有内容......

app.use('/static', express.static(__dirname + '/static'));

...但是只提供了三个文件中的两个。

如果有人能告诉我我的设置出错了，那会非常感激。

提前致谢。

Answer 1

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使用

始终重新加载服务器

节点快速服务器不提供图像文件夹

1 个答案: