借助反向代理在IIS中隐藏URL端口的方法求助

完全可行，用IIS的URL重写+**应用请求路由（ARR）**就能搞定，这是IIS官方支持的方案，下面给你一步步操作：

1. 安装必要组件 #

• 打开「服务器管理器」（或控制面板→程序和功能→启用或关闭Windows功能）
• 找到「Web服务器（IIS）」，勾选下方的URL重写模块；如果找不到应用请求路由（ARR），需到IIS官网下载对应安装包手动安装

2. 开启ARR代理功能 #

• 打开IIS管理器，选中左侧的服务器节点（不是具体站点），找到「应用请求路由缓存」
• 右侧操作栏点击「服务器代理设置」，勾选启用代理，确认保存

3. 创建80端口的站点（区分两个Vue应用） #

选以下任意一种区分方式即可：

方式一：路径区分 #

• 新建第一个站点，绑定地址设为http://localhost/app1，物理路径选任意空文件夹即可（仅做代理，无需实际文件）
• 新建第二个站点，绑定地址设为http://localhost/app2，操作同上

方式二：主机头区分 #

• 新建第一个站点，绑定主机头为app1.local、端口80，物理路径同上
• 新建第二个站点，绑定主机头为app2.local、端口80
• 修改本地C:\Windows\System32\drivers\etc\hosts文件，添加两行：

  127.0.0.1 app1.local
  127.0.0.1 app2.local
  

4. 配置站点的反向代理规则 #

以app1站点为例：

• 选中站点，打开「URL重写」
• 右侧点击「添加规则」→选择「反向代理规则」
• 目标地址填http://localhost:5000，勾选「启用SSL卸载」（HTTP环境下也可勾选），确认保存
• 重点配置出站规则：这步是避免Vue应用内的链接、资源路径仍指向带端口的地址，直接编辑站点根目录的web.config，确保规则如下：

  <rewrite>
    <rules>
      <rule name="ProxyToApp1" stopProcessing="true">
        <match url="(.*)" />
        <action type="Rewrite" url="http://localhost:5000/{R:1}" />
      </rule>
    </rules>
    <outboundRules>
      <rule name="FixApp1Links" preCondition="IsHtmlResponse">
        <match filterByTags="A, Form, Img, Script, Link" pattern="^http(s)?://localhost:5000/(.*)" />
        <action type="Rewrite" value="/app1/{R:2}" />
      </rule>
      <preConditions>
        <preCondition name="IsHtmlResponse">
          <add input="{RESPONSE_CONTENT_TYPE}" pattern="^text/html" />
        </preCondition>
      </preConditions>
    </outboundRules>
  </rewrite>
  

• 给app2站点配置规则时，只需把5000改成5001、/app1/改成/app2/即可

5. 调整Vue应用的打包配置 #

• 打开Vue项目的vue.config.js，设置publicPath：
  • app1项目：publicPath: '/app1/'
  • app2项目：publicPath: '/app2/'
• 重新打包后，确保原5000/5001端口的应用正常运行即可（无需将dist文件部署到新站点）

测试访问 #

• 路径区分：访问http://localhost/app1即可打开原5000端口的应用，URL无端口号
• 主机头区分：访问http://app1.local即可

常见问题排查 #

• 出现404：检查站点绑定是否正确、重写规则的目标地址是否有误
• 资源加载失败：检查Vue的publicPath配置、出站规则是否覆盖了所有资源标签（如Script、Link）
• 代理不生效：确认ARR代理功能已开启、站点权限允许转发请求

内容的提问来源于stack exchange，提问作者It's Siddiqi