We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
上一篇已经介绍了如何在开发环境配置 react 路由 history 模式。这篇文章将介绍react 路由 history 模式应用发布后的配置。下面以 IIS站点服务器配置为例,其他站点服务器类似
react 路由 history 模式发布在web 站点服务器上需要额外的配置,否则无法正常访问
下载安装成功,需要在站点根目录创建 web.config 文件
web.config
配置如下
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="single app rule" stopProcessing="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
如果单页应用的名称不是 index.html 需要修改 action 节点的 url 属性。假设单页应用名称为home.html,那么 action节点配置修改为:
action
url
home.html
如果后缀为 index.html 浏览器上可以不用体现,否则需要全称
<action type="Rewrite" url="/home.html" />
如果发布的文件放到站点的子文件夹中,需要修改以下配置
react 路由增加 basename 属性 属性值需要和站点下的子文件夹名称相同,假设站点下有一个 folder1 文件夹,那么react 路由配置改动为:
basename
<Router basename='/folder1'>
修改 web.config 配置
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <!--文件夹1-重写--> <rule name="folder1 rule" stopProcessing="true"> <match url="folder1/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder1/index.html" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
一个站点服务器可以放多个单页应用,假设和 folder1 文件同级还有一个 folder2 文件夹,folder2 里面放着另外一个应用。那么需要修改以下配置
第二个应用的 react 路由增加 basename 属性 属性值需要和站点下的子文件夹名称相同,那么react 路由配置改动为:
<Router basename='/folder2'>
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <!--文件夹1-重写--> <rule name="folder1 rule" stopProcessing="true"> <match url="folder1/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder1/index.html" /> </rule> <!--文件夹2-重写--> <rule name="folder2 rule" stopProcessing="true"> <match url="folder2/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder2/index.html" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
如想通过以下url 地址 http://mysite.com/ 达到访问 http://mysite.com/folder1 的目的,需要重写站点地址配置。如站点里有两个应用,分别存放在 folder1 和 folder2 中,此时想把默认站点定位到 folder1 中的应用,可以改为:
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <!--文件夹1-重写--> <rule name="folder1 rule" stopProcessing="true"> <match url="folder1/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder1/index.html" /> </rule> <!--文件夹2-重写--> <rule name="folder2 rule" stopProcessing="true"> <match url="folder2/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder2/index.html" /> </rule> <!--默认站点-跳转-规则(跳转到‘文件夹1’的地址)--> <rule name="root" stopProcessing="true"> <match url="^$" /> <action type="Redirect" url="/folder1" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
假设在文件夹 folder1 中的应用已经发布上线,此时需要迁移到到文件夹 folder-new 中,那么如果需要让之前用户正常访问老的地址,需要做到兼容处理(页面是嵌在上线的app 中的或者用户量比较大)。我们希望用户访问 http://mysite.com/folder1 自动跳转到 http://mysite.com/folder1-new 。我们可以通过配置重定向规则来解决。
首先修改路由的basename属性
<Router basename='folder1-new'>
修改 web.config 文件 新增文件夹 folder1-new 的重写规则
... <!--folder1-new-重写-规则--> <rule name="folder1-new rewrite rule" stopProcessing="true"> <match url="folder1-new/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder1-new/index.html" /> </rule> ...
新增文件夹 folder1的跳转规则
<!--folder1-跳转-规则(跳转到folder1的新地址)--> <rule name="folder1 rewrite rule" stopProcessing="true"> <match url="folder1/" /> <action type="Redirect" url="/folder1-new" /> </rule>
web.config 完整的配置
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <!--folder1-new-重写-规则--> <rule name="folder1-new rewrite rule" stopProcessing="true"> <match url="folder1-new/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder1-new/index.html" /> </rule> <!--文件夹2-重写--> <rule name="folder2 rule" stopProcessing="true"> <match url="folder2/" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/folder2/index.html" /> </rule> <!--folder1-跳转-规则(跳转到folder1的新地址)--> <rule name="folder1 rewrite rule" stopProcessing="true"> <match url="folder1/" /> <action type="Redirect" url="/folder1-new" /> </rule> <!--默认站点-跳转-规则(跳转到‘文件夹1’的地址)--> <rule name="root" stopProcessing="true"> <match url="^$" /> <action type="Redirect" url="/folder1" /> </rule> </rules> </rewrite> </system.webServer> </configuration>
--完--
The text was updated successfully, but these errors were encountered:
No branches or pull requests
前言
上一篇已经介绍了如何在开发环境配置 react 路由 history 模式。这篇文章将介绍react 路由 history 模式应用发布后的配置。下面以 IIS站点服务器配置为例,其他站点服务器类似
安装 IIS UrlRewrite使用
下载安装成功,需要在站点根目录创建
web.config
文件站点服务器只配置一个单页应用
配置如下
如果单页应用的名称不是 index.html 需要修改
action
节点的url
属性。假设单页应用名称为home.html
,那么action
节点配置修改为:发布文件放在站点的子文件夹中
如果发布的文件放到站点的子文件夹中,需要修改以下配置
react 路由增加
basename
属性属性值需要和站点下的子文件夹名称相同,假设站点下有一个 folder1 文件夹,那么react 路由配置改动为:
修改 web.config 配置
站点服务器配置多个单页应用
一个站点服务器可以放多个单页应用,假设和 folder1 文件同级还有一个 folder2 文件夹,folder2 里面放着另外一个应用。那么需要修改以下配置
第二个应用的 react 路由增加
basename
属性属性值需要和站点下的子文件夹名称相同,那么react 路由配置改动为:
修改 web.config 配置
重写站点地址
如想通过以下url 地址 http://mysite.com/ 达到访问 http://mysite.com/folder1 的目的,需要重写站点地址配置。如站点里有两个应用,分别存放在 folder1 和 folder2 中,此时想把默认站点定位到 folder1 中的应用,可以改为:
应用目录迁移
假设在文件夹 folder1 中的应用已经发布上线,此时需要迁移到到文件夹 folder-new 中,那么如果需要让之前用户正常访问老的地址,需要做到兼容处理(页面是嵌在上线的app 中的或者用户量比较大)。我们希望用户访问 http://mysite.com/folder1 自动跳转到 http://mysite.com/folder1-new 。我们可以通过配置重定向规则来解决。
首先修改路由的
basename
属性修改 web.config 文件
新增文件夹 folder1-new 的重写规则
新增文件夹 folder1的跳转规则
web.config 完整的配置
思考&QA
basename
属性值硬编码?建议
basename
属性值配置化参考
--完--
The text was updated successfully, but these errors were encountered: