Reactjs 部署问题答案

【问题标题】：Reactjs deployment issueReactjs 部署问题
【发布时间】：2020-09-06 21:41:24
【问题描述】：

我使用 url re-write 在我的 IIS 服务器上通过“构建”部署，但我注意到应用程序没有加载。

我的 Reactjs 应用程序被包裹在 express 节点中。

这是未加载的应用程序的网址：http://booleandev.com/expense-tracker

这是正在加载的应用程序的urlhttp://booleandev.com:9000

我注意到应用程序未加载的原因是因为所有链接都链接到损坏的链接 - booleandev.com/static/...

我该如何解决这个问题。

谢谢。

【问题讨论】：

您的问题解决了吗？如果您的问题得到解决，那么我请求您将有用的建议标记为答案。这将帮助面临同样问题的其他人。如果您的问题仍然存在，请尝试参考社区成员提供的解决方案。如果您还有其他问题，请告诉我们。我们将尝试提供进一步的建议来解决该问题。感谢您的理解。

标签： node.js reactjs iis iis-8

【解决方案1】：

尝试使用公共路径：

const publicPath = '/path/to/subfolder/';

export const routeCodes = {
  HOME: publicPath,
  SEARCH: `${ publicPath }search`,
  ABOUT: `${ publicPath }about`,
};

// Then you can use them like this
// <Route exact path={ routeCodes.ABOUT } component={ About } />

和 react-router 规则：

<rewrite>
  <rules>
    <rule name="Imported Rule 1" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <conditions logicalGrouping="MatchAny">
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsFile" ignoreCase="false" />
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsDirectory" ignoreCase="false" />
      </conditions>
      <action type="None" />
    </rule>
    <!--# Fallback all other routes to index.html-->
    <rule name="Imported Rule 2" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <action type="Rewrite" url="/path/to/subfolder/index.html" />
    </rule>
  </rules>
</rewrite>

参考链接：

How to bundle a React app to a subdirectory on a server?

【讨论】：