在IIS部署React前端项目
2024-09-02
15
在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也是这样配置就可以了。
更新于:17天前赞一波!
相关文章
- ASP.NET Core在IIS发布的两种方式
- IIS配置HTTP 301重定向到HTTPS实测有效
- 为IIS网站配置证书实现https访问免费教程
- React路径不变location.search参数改变不触发useEffect
- React Error: Exceeded timeout of 5000 ms for a test. 错误
- React @testing-library UserEvent.paste用法更新到14版本后不生效
- @testing-library/react单元测试getBy queryBy和findBy的区别
- React获取url参数的几种方法
- 如何正确安装IIS服务器
- react监听路由变化
- Vue和React怎么选?
- react hooks获取url参数
- react单元测试模拟点击浏览器返回按钮时触发popstate事件
- react基础面试问题
- react获取url参数 忽略参数名大小写
- 本地iis自签证书使用https
- Python - 使用 Tinyurl API 的 URL 缩短器
- react获取url参数不区分大小写
- 如何在React中使用路由?
- 如何在 React 中使用 GraphQL
文章评论
全部评论