Question

我在 public 文件夹中有一些子文件夹。当我构建这些子文件夹时，将其放在构建文件夹的根目录中。

public/
  mySubfolder/
  favicon.ico
  index.html
  ...

build/
  mySubfolder/ 
  static/
  favicon.ico
  index.html
  ...

当我使用express，serve或firebase，heroku将这些文件作为静态提供时，现在......我无法通过url访问这些子文件夹。示例：如果我将其中一个子文件夹中的一个文件放在iframe中，我无法访问它，而如果我将路径放在img标记的src属性中则可以正常工作。也许子文件夹与路径冲突，但我没有带有子文件夹名称的路由。

我的项目在github：https://github.com/Darklod/p5-sketches-react/tree/heroku?files=1

P.S。我已阅读本指南：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Answer 1

要使用Express提供React应用程序，您需要在配置中使用以下内容：

app.use(express.static(path.join(__dirname, 'react')));

app.get('*', (req, res) => {
     res.sendFile(path.join(path.join(__dirname, 'react/index.html'));
});

在该示例中，将react替换为您的React应用程序所在的文件夹

我很遗憾没有使用firebase或heroku来提供React应用程序，所以我很遗憾无法帮助你解决这个问题，但我希望Express部分能够解决这个问题

Answer 2

已经有一段时间了，我想结束这个问题。所以我试图解决它。

当我尝试使用React的16.2.0版本时，我不知道它是否也可以在最新版本中使用。

静态文件管理和__dirname值取决于webpack和诸如create-react-app之类的应用程序生成器。如果您从头开始编写代码，那么应该不会有任何问题。

但是，在Marco的回应中，我以这种方式导入了放置在根文件夹（manifest.json，service-worker.js，index.html ...）中的静态文件：

app.use(express.static(__dirname));

Create-React-App公用文件夹子文件夹

2 个答案: