根据您提供的链接内容和描述,这是一个典型的单页应用(SPA)部署到IIS服务器后,刷新非根路径页面出现404错误的问题。这通常是因为IIS无法识别Vue、React等框架使用的前端路由(history模式),导致服务器尝试寻找一个不存在的物理文件或目录。
问题核心原因
当您从首页(如 http://shop.145829.com/)正常导航到子页面(如 http://shop.145829.com/news/1)时,路由由前端JavaScript控制。但直接访问该子页面URL或刷新页面时,请求会发送到IIS服务器。IIS默认会尝试在网站目录下寻找名为 news/1 的文件或文件夹,由于找不到,便返回了您看到的“404 - File or directory not found”错误。
解决方案:配置IIS URL重写规则
解决此问题的核心思路是:配置IIS,将所有不是请求真实文件或目录的访问,都重定向到单页应用的入口文件(通常是 index.html),由前端路由接管后续处理。
以下是具体的解决步骤:
1. 确保已安装URL重写模块
IIS默认不包含URL重写功能,需要先安装“URL Rewrite”模块。
下载安装:您可以从Microsoft官方网站下载并安装该模块。
验证安装:安装完成后,重启IIS,在IIS管理器中选中您的站点,如果在功能视图里能看到 “URL 重写” 图标,即表示安装成功。
2. 配置重写规则(两种方法任选其一)
方法一:通过IIS管理器图形化界面配置(推荐)
在IIS管理器中,选中您的网站(例如 shop.145829.com)。
双击打开 “URL 重写” 模块。
在右侧“操作”面板,点击 “添加规则...”,然后选择 “空白规则”。
配置规则:
名称:可自定义,如“SPA Fallback”。
匹配URL:
“请求的URL”选择:与模式匹配
“使用”选择:通配符 或 正则表达式(两者皆可,效果类似)。
“模式”填写:* (星号,表示匹配所有URL)。
条件:点击“添加”,添加两个条件(逻辑分组为“全部匹配”):
条件1:输入 {REQUEST_FILENAME},检查是否“不是文件”。
条件2:输入 {REQUEST_FILENAME},检查是否“不是目录”。
操作:
“操作类型”选择:重写
“重写URL”填写:/index.html。
点击右侧“应用”保存规则。
方法二:直接在网站根目录创建/修改 web.config 文件
如果您无法操作服务器或希望配置随项目代码部署,可以在您网站根目录(即 index.html 所在目录)下创建或修改一个名为 web.config 的XML文件,并填入以下内容:
xml
此配置与图形化界面配置的效果完全相同。
3. 重启IIS并测试
完成配置后,建议重启IIS服务(可以在命令行运行 iisreset)。然后再次尝试直接访问或刷新 http://shop.145829.com/news/1 这类子路径链接,页面应该能正常加载,不再出现404错误。
进阶优化(可选)
如果您的网站同时提供API接口或静态资源,为了避免重写规则错误地拦截这些请求,可以在上述规则之前添加排除规则。例如,在 web.config 中,可以在SPA规则前添加:
xml
这样能确保静态资源和API请求被正常处理,不被重写到 index.html。
总结
您遇到的问题是SPA应用在IIS上的经典部署问题。核心解决方案就是为IIS配置URL重写规则,将所有非文件、非目录的请求导向 index.html。按照上述步骤操作,即可解决刷新404的问题