使用create react app和react router在自定义根路径“/app”下部署react时出现问题

提问者：小点点

使用create react app和react router在自定义根路径“/app”下部署react时出现问题

我正在主机上部署一个应用程序，它具有以下设置：

https://example.com/app1
https://example.com/app2
等等

我需要为我的React应用程序部署一个自定义根路径/app，该应用程序将位于此保护伞下。我正在使用react路由器v5和创建react应用程序。

当我构建应用程序时（我正在使用vercel的服务），我会得到一个空白页面。当我转到localhost:5000/app/时，没有显示任何内容。

我从这里和这里做了所有的建议，但仍然不能让我的应用程序加载。

我也很困惑：使用react路由器的basename和CRA的主页字段有什么区别？我应该两者都用，还是一个或另一个？

编辑：可能发现了问题。设置home page=/app还会更改我的JS bundle的路径，它无法识别（因此出现了空白页）。我手动添加了一个app文件夹在我的build目录中，就像这样：build/app/静态并且它工作。CRA不应该自动这么做吗？

<Router basename={process.env.PUBLIC_URL}>
  ...
</Router>

scripts: {
  "build-prod": "GENERATE_SOURCEMAP=false REACT_APP_ENVIRONMENT=production react-app-rewired build",
},
...
"homepage": "/app",

> npm run build-prod && serve -s build -l tcp://0.0.0.0:5000

The project was built assuming it is hosted at /app/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  bit.ly/CRA-deploy

我导航到http://0.0.0.0:5000/app/并获得一个空白页（无网络呼叫）。

设置主页："/app"在package.json源
设置react-router源的基名
CRA文档显示了一个使用网站完整路径的示例。那也没用：

"homepage": "https://example.com/app",

共1个答案

匿名用户

我让它工作了，尽管这是一个解决办法。

正如莫希特的评论所提到的，home page字段使所有资产都由home page中定义的子路径预先挂起。我得到了一个空白的屏幕，因为它找不到我的JS包的新路径，也就是它从服务/build/静态/js/...到/build/app/静态/js/...。

在build目录下创建一个名为app的新文件夹（或任何称为新根路径的文件夹）。
将您的/build/ste文件夹移动到build/app/ste。
这就是Dockerfile的样子：

RUN pwd
RUN echo $(ls -1 $pwd)
RUN echo $(ls -1 ./build)
RUN mkdir -p ./build/app
RUN mv ./build/static ./build/app # now it should be /build/app/static
RUN echo $(ls -1 ./build)

您可以删除pwd和echo行，我添加了它，这样我就可以看到它的工作。

我不知道为什么CRA默认不这样做。这可能是因为我正在使用react-app-rewire，这与CRA的webpack配置有关？