嘿，这个需求我刚好踩过坑，给你分开发环境调试和生产环境部署到IIS两种场景来一步步实现：

一、开发环境：用Vite代理整合端口 #

开发时不用改太多，通过Vite的代理功能，让前端把API请求转发到后端端口，这样你只需要访问前端的端口就能同时调用后端接口，看起来像是同一个端口在服务。

1. 打开Vue项目里的vite.config.js（或.ts），添加server.proxy配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      // 匹配所有以/api开头的请求
      '/api': {
        target: 'https://localhost:5001', // 替换成你的ASP.NET API运行地址
        changeOrigin: true, // 必须设为true，否则后端会收到前端的端口作为来源
        secure: false, // 如果本地后端用的是自签HTTPS证书，设为false避免证书校验错误
        // 可选：如果后端路由本身不带/api前缀，就用rewrite去掉前缀
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

2. 配置完后，重启前端服务（npm run dev）。现在你在前端代码里请求/api/xxx，就会自动转发到后端的https://localhost:5001/xxx（如果加了rewrite的话）。

注意：开发时还是需要先启动ASP.NET API，再启动前端，但访问的时候只需要用前端的端口就够了。

二、生产环境：部署到同一IIS站点（两种方案） #

方案1：将前端静态文件嵌入ASP.NET项目（最简单） #

这种方案是把前端打包后的文件放到ASP.NET项目里，一起发布到IIS，由ASP.NET同时托管静态文件和API接口。

1. 在Vue项目里执行npm run build，生成dist文件夹。
2. 把dist里的所有文件（包括index.html、assets等）复制到ASP.NET项目的wwwroot文件夹下（如果没有wwwroot就手动创建）。
3. 修改ASP.NET的Program.cs，配置静态文件和SPA路由 fallback：

var builder = WebApplication.CreateBuilder(args);

// 先添加你的API服务配置（比如AddControllers、AddDbContext等）
builder.Services.AddControllers();

var app = builder.Build();

// 启用静态文件服务，让ASP.NET能返回wwwroot里的前端文件
app.UseStaticFiles();

// 配置API路由
app.MapControllers();

// 处理Vue的SPA路由：当用户访问非API的路由时，返回index.html（避免刷新页面404）
app.MapFallbackToFile("index.html");

app.Run();

4. 正常发布ASP.NET项目到IIS即可。现在IIS站点的端口就是唯一的访问入口：访问根路径http://your-domain/会打开前端页面，访问http://your-domain/api/xxx会调用后端接口。

方案2：IIS反向代理（前后端独立部署但同端口） #

如果想前后端分开部署（比如前端更新不用重新发布API），可以用IIS的反向代理功能，让根站点托管前端，把/api请求转发到后端的IIS应用。

1. 先确保IIS安装了两个必备模块：URL Rewrite和Application Request Routing (ARR)。
2. 在IIS里创建一个根站点，部署前端的dist文件；再创建一个子应用（比如名为api），部署ASP.NET API。
3. 在根站点的web.config里添加URL Rewrite规则：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 把/api开头的请求转发到后端子应用 -->
        <rule name="Proxy to API" stopProcessing="true">
          <match url="api/(.*)" />
          <action type="Rewrite" url="/api/{R:1}" /> <!-- 子应用的路径 -->
          <!-- 如果后端是独立的IIS站点，就写成http://localhost:xxxx/api/{R:1} -->
        </rule>
        <!-- SPA路由 fallback：处理前端的路由，避免刷新页面404 -->
        <rule name="SPA Fallback" 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="^/api/" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这样配置后，访问根路径是前端页面，访问/api会自动转发到后端接口，全程用同一个IIS端口。

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