.NET Vue应用部署为IIS子应用失败，独立站点部署正常

针对你遇到的部署为IIS子应用时找不到dist路径的问题，可从以下几个方面排查修复：

1. 调整Startup.cs中的SPA静态文件配置 #

生产环境下，子应用的虚拟路径会改变静态资源的访问根路径，需明确指定dist文件夹的物理路径及请求路径：

修改Configure方法中的UseSpa部分，添加生产环境的路径配置：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他代码保持不变...

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "clientapp";

        if (env.IsDevelopment())
        {
            spa.UseVueCli(npmScript: "serve", port:8080);
        }
        else
        {
            // 指定dist文件夹的物理路径
            var distPath = Path.Combine(env.ContentRootPath, "clientapp", "dist");
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(distPath)
            };
            // 设置子应用的虚拟路径（比如你的子应用叫MyApp，就写"/MyApp"）
            spa.Options.BasePath = "/MyApp";
        }
    });
}

2. 配置Vue项目的publicPath #

Vue打包后的静态资源需要基于子应用的虚拟路径加载，修改clientapp/vue.config.js：

module.exports = {
  // 生产环境下指定子应用的虚拟路径，开发环境保持根路径
  publicPath: process.env.NODE_ENV === 'production' ? '/MyApp/' : '/'
}

3. 确保IIS子应用配置正确 #

• 应用程序池设置：子应用的应用程序池需选择.NET Core对应的版本，且.NET CLR版本设为无托管代码。
• 虚拟路径与物理路径：确认子应用的虚拟路径（如/MyApp）正确，物理路径指向.NET应用发布后的根目录。
• 文件权限：给发布目录（尤其是clientapp/dist）添加IIS_IUSRS或应用程序池标识的读取权限。

4. 配置IIS URL重写规则（解决刷新页面404问题） #

单页应用刷新时需要将请求转发到index.html，在项目根目录添加web.config（若发布未自动生成）：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA Route" 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="/MyApp/index.html" /> <!-- 替换为你的子应用虚拟路径 -->
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

5. 确保发布时包含dist文件夹 #

在.NET项目文件（.csproj）中添加以下配置，让发布过程自动执行Vue打包并包含dist文件：

<PropertyGroup>
  <SpaRoot>clientapp\</SpaRoot>
</PropertyGroup>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)dist\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

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