您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

认情况下,假设您的应用托管在服务器根目录下,Create React App会生成一个构建。example.com 如果您的网站不是从该根目录提供的,(也许您想从进行服务example.com/relativepath,则可以通过在package.json中指定主页来覆盖它

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

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

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

希望对您有帮助

其他 2022/1/1 18:13:35 有709人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶