2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 服务器 > IIS

在IIS部署React前端项目

时间:12-16来源:作者:点击数:31

在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重写这个模块。

在IIS部署React前端项目

然后在站点根目录下添加一个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也是这样配置就可以了。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门