Question

我有这个项目结构：

应用
- server.js
- 前端
  - 构建
    - 的index.html

build目录是我的React应用程序npm run build之后的结果（使用create-react-app创建的）。有更多的文件，但我省略了它们的例子。

我想将React应用程序作为静态文件提供，因此在server.js中，我有这个：

app.use(express.static(path.resolve(__dirname, 'frontend/build')));
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'frontend/build', 'index.html'));
});    
app.listen(9001);

我在浏览器中导航到http://localhost:9001并且没有错误，但屏幕为空白。 React app未显示。

如果我使用frontend运行React应用程序（来自npm start目录内），它可以正常工作（在默认的webpack端口3000中）。

这是build/index.html文件（漂亮打印）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

  <meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"/>

  <title>React App</title><link href="/static/css/main.65027555.css" rel="stylesheet"></head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/main.a4d4d402.js"></script>
  </body>

</html>

如果我导航到http://localhost:9001/static/js/main.a4d4d402.js，我可以看到javascript文件。

Answer 1

我发现了错误。 index.html中的引导程序导入出错。我两次关闭标签。在我的问题看起来很好，因为我用手打印，也许我已经以某种方式纠正了它。

使用Express提供React构建不会显示任何内容

1 个答案: