在IIS上部署React前端项目,在不是根路径的时候刷新页面会404,可以通过url rewrite设置解决这个问题。
首先在react项目中运行npm run build打包项目。
然后在IIS上创建一个站点,把build文件夹里的内容拷贝到站点文件夹内。
这个时候已经可以直接访问这个react项目了。点击路由链接也是正常工作的。
但是如果在不是根目录路径刷新页面的话就会报404错误,解决方法是这样的:
下载URL Rewrite,下载地址是:https://www.iis.net/downloads/microsoft/url-rewrite#additionalDownloads
安装好以后重启IIS服务,可以在IIS里看到URL重写这个模块。
然后在站点根目录下添加一个web.config文件,文件内容是:
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React" 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>
<staticContent>
<mimeMap fileExtension=".webp" mimeType="image/webp" />
</staticContent>
</system.webServer>
</configuration>
然后再刷新页面,就不会404找不到页面了。这里的rewrite规则是把所有请求都转发到根目录,这样就解决了。类似的Angular部署到IIS也是这样配置就可以了。