Angular路由跳转时URL丢失目录前缀问题求助

我来帮你搞定这个问题！你遇到的是Angular单页应用部署在IIS子应用时的典型路由与资源加载问题——虽然你已经用了--baseHref=/test/构建参数，但还需要配合IIS的URL重写规则，才能让前端路由和地址栏路径正常联动。下面是具体的解决步骤：

1. 确认baseHref配置已生效 #

先检查构建后的index.html文件，确认里面存在<base href="/test/">标签。如果没有，要么重新执行ng build --baseHref=/test/确保参数生效，要么手动在index.html的<head>里添加这个标签，它是Angular识别资源根路径的关键。

2. 给IIS的test应用添加URL重写规则 #

这是核心解决步骤。Angular的前端路由跳转时，浏览器会直接请求对应URL，但IIS默认不会把这些非物理文件的请求转发到index.html，导致地址栏丢失/test路径。我们需要在test应用的物理根目录创建web.config文件，让IIS正确处理路由请求：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(test)" negate="false" />
          </conditions>
          <action type="Rewrite" url="/test/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

这个配置的作用：

• 当请求的不是真实文件/目录时，自动重写到/test/index.html，交给Angular路由处理
• 补充了常见静态资源的MIME类型，避免字体、JSON等资源加载404

3. 可选：改用哈希路由（无需配置IIS重写） #

如果你暂时不想配置IIS规则，也可以修改Angular路由启用哈希模式，这样地址栏会变成http://localhost/test/#/，不会丢失test路径。修改路由配置如下：

@NgModule({
  imports: [ RouterModule.forRoot(routes, { 
    preloadingStrategy: PreloadAllModules,
    useHash: true // 启用哈希路由
  }) ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

不过这种方式URL会带#，用户体验不如无哈希路由，更推荐第一种方案。

最后重启IIS的test站点，再访问http://localhost/test，登录页跳转后地址栏会保持http://localhost/test/，资源也能正常加载了。

内容的提问来源于stack exchange，提问作者Michael Winther