如何为两个独立.esproj文件指定不同的发布资产输出位置？

后端基于.NET 9，原本通过.esproj搭配Microsoft.VisualStudio.JavaScript.Sdk集成Vue前端，另有一个引用Microsoft.NET.Sdk.StaticWebAssets的部署专用.csproj——执行dotnet publish时会触发npm构建Vue项目，将dist内资源收集到wwwroot并压缩。

现在新增了React项目的.esproj，希望将两个前端的发布资产分别存放到不同子目录用于A/B测试，但遇到文件冲突报错：

Microsoft.NET.Sdk.StaticWebAssets.Publish.targets(25,5): error : Conflicting assets with the same target path

尝试过在.esproj中设置StaticWebAssetBasePath但被Microsoft.VisualStudio.JavaScript.Sdk覆盖；也试过让npm输出到dist/vue和dist/react，但dist下的*.staticwebassets.runtime.json仍存在冲突。

以下是几个可行的解决方法，按优先级推荐：

1. 在部署项目中为每个前端项目指定静态资源基础路径 #

直接在部署用的.csproj里，给每个前端项目的ProjectReference单独设置StaticWebAssetBasePath，这是最直接的方式，不会被前端项目的配置覆盖：

<ItemGroup>
  <!-- Vue项目指定基础路径为vue -->
  <ProjectReference Include="..\YourVueApp\YourVueApp.esproj">
    <StaticWebAssetBasePath>vue</StaticWebAssetBasePath>
  </ProjectReference>
  <!-- React项目指定基础路径为react -->
  <ProjectReference Include="..\YourReactApp\YourReactApp.esproj">
    <StaticWebAssetBasePath>react</StaticWebAssetBasePath>
  </ProjectReference>
</ItemGroup>

部署项目执行dotnet publish时，会自动将Vue的资产收集到wwwroot/vue，React的资产收集到wwwroot/react，彻底避免文件冲突。

2. 修正前端.esproj的StaticWebAssetBasePath配置 #

如果想在前端项目层面控制路径，需要确保StaticWebAssetBasePath的配置不会被SDK覆盖，同时指定npm的输出目录匹配该路径：

<!-- Vue项目的.esproj -->
<PropertyGroup>
  <StaticWebAssetBasePath>vue</StaticWebAssetBasePath>
  <!-- 让npm将产物输出到dist/vue -->
  <NpmScriptBuildArguments>--dest dist/vue</NpmScriptBuildArguments>
  <!-- 确保静态资源清单文件路径唯一 -->
  <StaticWebAssetsManifestPath>$(MSBuildProjectDirectory)/dist/vue/staticwebassets.vue.runtime.json</StaticWebAssetsManifestPath>
</PropertyGroup>

<!-- React项目的.esproj -->
<PropertyGroup>
  <StaticWebAssetBasePath>react</StaticWebAssetBasePath>
  <NpmScriptBuildArguments>--dest dist/react</NpmScriptBuildArguments>
  <StaticWebAssetsManifestPath>$(MSBuildProjectDirectory)/dist/react/staticwebassets.react.runtime.json</StaticWebAssetsManifestPath>
</PropertyGroup>

这里通过NpmScriptBuildArguments直接给npm构建命令传递输出目录参数，同时重命名静态资源清单文件，解决*.staticwebassets.runtime.json的冲突问题。

3. 自定义部署项目的静态资产收集逻辑 #

如果上述方法仍不生效，可以在部署项目中直接自定义静态资产的复制规则，绕过默认的StaticWebAssets收集机制：

<Target Name="CopyFrontendAssets" AfterTargets="Publish">
  <!-- 复制Vue构建产物到wwwroot/vue -->
  <Copy SourceFiles="..\YourVueApp\dist\**" DestinationFiles="$(PublishDir)/wwwroot/vue/%(RecursiveDir)%(Filename)%(Extension)" />
  <!-- 复制React构建产物到wwwroot/react -->
  <Copy SourceFiles="..\YourReactApp\dist\**" DestinationFiles="$(PublishDir)/wwwroot/react/%(RecursiveDir)%(Filename)%(Extension)" />
</Target>

这种方式完全自定义资产复制逻辑，适合需要更灵活控制的场景，但需要确保关闭默认的StaticWebAssets收集（可以在部署项目中设置<DisableStaticWebAssetsPublish>true</DisableStaticWebAssetsPublish>）。

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