时间戳

首页 > 解决方案 > 使用代理时，React 应用程序正在寻找不同位置的静态文件

reactjs - 使用代理时，React 应用程序正在寻找不同位置的静态文件

问题描述

我曾经npx create-react-app my-app创建过一个反应应用程序。

我用来npm run build构建应用程序并使用serve -s build

我正在使用代理服务器来公开我的应用程序。

我的 httpd 配置如下所示，

/react_app http://192.168.1.100:3000

真正发生的事情是，一旦收到请求，http://<my public domain>/react_app我就需要展示我的 React 应用程序。

但问题是它寻找静态文件http://<my public domain>/static/..而不是http://<my public domain>/react_app/static/....

在我的index.html我已经将所有绝对路径设置为相对路径，如下所示，

ex:
<script src="./static/js/******.chunk.js"></script>
<link rel="manifest" href="./manifest.json"/>

但这并没有解决我的问题。有什么办法可以解决我的问题吗？

标签： reactjsapachedeployment

解决方案

建立相对路径create-react-app

可以有两个地方可以定义相对路径

1) 默认情况下，Create React App 会生成一个构建，假设您的应用托管在服务器根目录中。要覆盖它，请在 package.json 中指定主页，例如：

  "homepage": "http://mywebsite.com/react_app",

这将使 Create React App 正确推断要在生成的 HTML 文件中使用的根路径。

2）如果您使用的是 react-router@^4，则可以使用设置相对路径basename

<Router history={browserHistory} basename={'react_app'}>
  <Route path="/" component={App} />
</Router>

希望有帮助！！！

推荐阅读