gpt4 book ai didi

reactjs - 如何使用expressJS提供ReactJS静态文件?

转载 作者:行者123 更新时间:2023-12-03 13:20:00 24 4
gpt4 key购买 nike

问题

我已成功提供 React 应用程序的 index.html 文件,但 index.js取代 <root>在html文件中我的第一个 React 组件没有在 ReactDOM.render 上触发。如何获取 index.js文件来启动? 如果我对服务 React 应用程序的理解在某些方面存在偏差,我会极大地感谢澄清。

文件夹结构

  • /- 包含所有服务器端文件,包括server.js
  • /client/- 包含所有 React 文件
  • /client/build/- 包含所有生产就绪的客户端文件
    • /client/build/index.html
    • /client/build/static/js/main.[hash].js - 似乎是 index.js 的缩小版本包含 ReactDOM.render为了我的 React 应用

当前部署

  • 我在/client/目录中使用 Facebook 的 create-react-app,包括 npm run build 自动填充/client/build/

文件片段

// server.js
let app = express();
app.use(express.static(path.join(__dirname, '../client/public')));

这成功加载了提供的默认index.html创建 react 应用程序

// index.html
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>

上面的代码部分可能有用也可能没用,但它是默认的create-react-app 附带的 html 文件。我需要更换吗noscript 标记,带有引用缩小的 index.js 的 script 标记文件?我已经尝试过,但没有任何改变,但也许是这样因为相对路径制定不正确。

最佳答案

通过反复试验尝试了许多不同的方法后,解决方案非常简单:

在静态调用中提供/client/build 文件夹,如下所示:

app.use(express.static(path.join(__dirname, '../client/build')));

关于reactjs - 如何使用expressJS提供ReactJS静态文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44684461/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com