在IIS 10上部署三个带路由的Angular应用的最佳方法咨询

我经常处理这类Angular SPA部署到IIS的问题，针对你要部署三个独立Angular应用到子目录的场景，下面是一套经过生产环境验证的完整方案：

一、先配置每个Angular应用的打包参数 #

Angular的前端路由依赖base href来确定路由的基准路径，所以每个应用打包时必须指定对应的子目录路径：

1. 命令行打包（临时生效） #

针对三个应用分别执行：

# 打包first-app
ng build --base-href /first-app/ --output-path dist/first-app

# 打包second-app
ng build --base-href /second-app/ --output-path dist/second-app

# 打包third-app
ng build --base-href /third-app/ --output-path dist/third-app

2. 配置文件持久化（推荐） #

如果不想每次打包都输命令，可以修改每个应用的angular.json，在对应项目的architect.build.options里添加baseHref：

{
  "projects": {
    "first-app": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/first-app/",
            // 其他配置...
          }
        }
      }
    }
  }
}

之后直接运行ng build就会自动使用这个base href打包。

二、IIS站点配置 #

1. 创建应用程序（核心！不要用虚拟目录） #

打开IIS管理器，找到你的目标站点（比如默认的Default Web Site），右键选择添加应用程序：

• 别名：输入first-app（对应你的子目录名）
• 应用程序池：选择一个无托管代码的应用池（如果没有，新建一个，.NET CLR版本选“无托管代码”）
• 物理路径：指向你打包后的dist/first-app文件夹的绝对路径

重复上述步骤，分别创建second-app和third-app两个应用程序，对应各自的打包输出目录。

2. 安装URL重写模块（必装） #

因为Angular是SPA，刷新或直接访问子路由时，IIS会尝试寻找对应的物理文件（比如/first-app/home），但这些文件不存在，会返回404。解决这个问题需要IIS的URL重写模块：

• 打开服务器管理器，添加角色和功能，在Web服务器>应用程序开发里勾选URL重写
• 或者直接下载微软的URL重写工具安装包进行安装

三、添加web.config解决路由404 #

在每个应用的打包输出目录（比如dist/first-app）下创建web.config文件，内容如下：

<?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" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
    <!-- 可选：启用gzip压缩提升加载速度 -->
    <httpCompression>
      <dynamicTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
      </dynamicTypes>
      <staticTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="image/*" enabled="true" />
      </staticTypes>
    </httpCompression>
  </system.webServer>
</configuration>

提示：可以把这个web.config放到Angular应用的src目录下，这样每次打包时会自动复制到dist目录，不用手动重复添加。

四、验证路由功能 #

完成上述配置后，测试以下场景：

• 访问localhost/first-app，应用正常加载
• 点击应用内的路由链接跳转到/first-app/home，页面正常显示
• 直接在地址栏输入localhost/first-app/home并回车，页面正常加载（无404）
• 刷新/first-app/home页面，页面正常加载（无404）

重复测试second-app和third-app，确保所有路由场景都正常。

为什么这是最优方案？ #

• 每个应用独立配置，互不干扰，便于后续单独更新或维护
• 基于Angular官方推荐的base href配置，从根源上保证路由基准路径正确
• 使用IIS URL重写规则完美解决SPA路由刷新404问题，这是行业通用的标准方案
• 应用程序池使用无托管代码，减少不必要的资源消耗，提升性能

内容的提问来源于stack exchange，提问作者Developer Thing