在IIS虚拟目录部署Vue.js 3与ASP.NET Core API配置求助

一、不改动IIS视图的部署配置 #

• 保留现有物理文件夹结构，仅在目标子目录（如你的App目录）上操作：右键该目录→选择「转换为应用程序」，分配独立的应用程序池（前端目录可选择「无托管代码」模式，API目录选择对应.NET Core版本的托管模式）。
• 无需修改站点根目录的任何配置或结构，确保仅拥有该子目录的操作权限即可完成部署。

二、修复静态资源路径指向错误 #

1. 调整Vue项目构建配置 #

在项目根目录的vue.config.js中设置publicPath为你的子路径：

module.exports = {
  publicPath: '/app/' // 对应访问路径abc.com/app/
}

重新执行npm run build，将生成的dist目录文件部署到IIS的App目录下。

2. 配置正确的URL重写规则（App目录下的web.config） #

替换原有规则，确保同时处理Vue路由跳转和静态资源路径：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 路由重写：非静态资源/非API请求指向index.html -->
        <rule name="Vue Route Rewrite" 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" /> <!-- 排除API路径 -->
          </conditions>
          <action type="Rewrite" url="/app/index.html" />
        </rule>
      </rules>
    </rewrite>
    <!-- 确保静态资源MIME类型正确 -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
    </staticContent>
  </system.webServer>
</configuration>

三、ASP.NET Core API配套配置 #

如果API部署在同一站点的子目录（如/api），需在Program.cs中配置路由前缀和跨域：

var builder = WebApplication.CreateBuilder(args);

// 配置跨域策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowVueApp", policy =>
    {
        policy.WithOrigins("https://abc.com/app")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

app.UseCors("AllowVueApp");
app.UseHttpsRedirection();
app.UseAuthorization();

// 设置API路由前缀
app.MapControllers().WithRoutePrefix("/api");

app.Run();

最后检查 #

• 部署后清除浏览器缓存，避免旧路径缓存影响测试
• 确认应用程序池状态正常，无权限或版本不匹配问题

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