您当前的位置:首页 > 计算机 > 服务器 > IIS

在IIS部署React前端项目

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

在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也是这样配置就可以了。

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