如何在Azure网站上的React App中替换％PUBLIC_URL％

如何替换％PUBLIC_URL％

默认情况下，假设您的应用托管在服务器根目录下，Create React App会生成一个构建。

example.com

example.com/relativepath

"homepage": "http://example.com/relativepath",

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

但是，就您的情况而言，我认为您会收到404错误，因为Azure正在尝试查找index.html（或其他一些名为index。*的名称）。要解决此问题，Azure需要知道如何将预期的路由传递到位于站点根目录的唯一的index.html。使用以下内容创建一个名为

web.config

/site/wwwroot

<?xml version="1.0" encoding="UTF-8"?><configuration>   <system.webServer>      <rewrite>         <rules> <rule name="React Routes" stopProcessing="true">    <match url=".*" />    <conditions logicalGrouping="MatchAll">       <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />       <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />       <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />    </conditions>    <action type="Rewrite" url="/" /> </rule>         </rules>      </rewrite>   </system.webServer></configuration>

这将告诉Azure重写所有URL，就像它们指向我们的根文件一样，并且我们的SPA应用程序可以正确处理链接。

参考文献：

• https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths

• https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321

希望对您有帮助