在子文件夹MERN应用中创建React应用构建问题

问题描述

我正在开发一个MERN应用程序，该应用程序的根目录中有一个客户端文件夹（请参见下面的结构），其中包含一个Create React App。在我的根文件夹中，有自己的package.json的快速服务器项目（Routes文件夹，Models文件夹，server.js等）。

我的问题是，在构建了create react应用之后，我的快递服务器将无法正确提供服务。我只能使用客户端路由（react-router的Link元素）来导航应用程序，但是如果我想使用服务器端加载特定页面（例如直接在浏览器中键入URL），则会返回空白页面。

此外，我在尝试从引导CDN加载一些JS和CSS文件以及诸如我的公共AWS S3存储桶图像之类的资产时遇到了一些CSP问题。

在Internet上搜索时，我发现了许多解决空白页问题的“解决方案”，但没有一个起作用：

• 添加“主页”：“。”在客户的package.json中
• 在react-router的BrowserRouter基本名称prop上添加“ /子目录”（完成和不执行上一个项目）
• 在package.json中添加“ mydomain.com”作为主页（也尝试使用和不使用上面描述的基本名称prop）
• 在我的index.html文件中设置。
• 在我的.env文件中，直接在react-script build命令上使用INLINE_RUNTIME_CHUNK = false标志（结合和不结合上面描述的所有选项）。

这是我的文件夹结构：

• 客户
  • 构建->在npm运行构建后生成
  • 公开
  • .env
  • package.json
  • package-lock.json
• 中间件
• 模型
• 查询
• 路线
• .env
• server.js
• package.json
• package.lock.json

我的用于服务客户端的 server.js 文件配置：

app.use(express.static(path.join(__dirname,'client','build')));
app.get('/*',function (req,res) {
res.sendFile(path.join(__dirname,'build','index.html'));

老实说，我已经尝试了所有方法，但无法使其正常工作。我之前做了几个CRA，添加了一个Express服务器并在客户端和服务器之间共享package.json，没有任何问题。

我也想清理我的网址（浏览器的导航栏中没有子目录），但是我不知道是否可以使用此结构。

让我知道，如果我可以分享更多信息或任何代码段来帮助您了解问题的更多背景，我将不胜感激。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）