Visual Studio 17.8 Preview 1中React SPA模板部署失败求助

昨日Visual Studio团队在17.8 Preview 1中发布了两项受欢迎的改进：

• React和ASP.NET Core Visual Studio模板支持TypeScript
• React和ASP.NET Core Visual Studio模板支持Vite

但我无法使用自包含部署选项部署新模板（Azure Web App Service暂不支持.NET 8.0.0版本）。尝试通过Visual Studio中的「Build | Publish...」选项配置Azure新资源后，启动网站时出现404错误。

我曾撰写过一篇详细文章，介绍如何部署用于企业认证的现有dot net react版本模板，希望在成功将新版预览模板部署到Azure并运行后更新该文章。

我怀疑问题在于新预览模板的.CSPROJ文件远不如旧版模板的.CSPROJ文件详细，以下是两者的对比：

旧版模板的.CSPROJ（包含关键的PublishRunWebpack目标） #

<Project Sdk="Microsoft.NET.Sdk.Web"> 
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot><DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules</DefaultItemExcludes>
<SpaProxyServerUrl>https://localhost:3000</SpaProxyServerUrl>
<SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.8" />
<PackageReference Include="Microsoft.Identity.Web" Version="2.13.2" />
<PackageReference Include="Microsoft.Identity.Web.MicrosoftGraph" Version="2.13.2" />
<PackageReference Include="Microsoft.Identity.Web.UI" Version="2.13.2" />
</ItemGroup>

<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None Remove="$(SpaRoot)**" />
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>

<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
  <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

<!-- Include the newly-built files in the publish output -->
<ItemGroup>
  <DistFiles Include="$(SpaRoot)build\**" />
  <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
    <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
  <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
  </ResolvedFileToPublish>
</ItemGroup>
</Target>
</Project>

新版预览模板的.CSPROJ #

CLIENT项目 #

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.105-alpha">
<PropertyGroup>
<StartupCommand>npm run dev</StartupCommand>
<JavaScriptTestRoot>src\</JavaScriptTestRoot>
<JavaScriptTestFramework>Jest</JavaScriptTestFramework>
<!-- Allows the build (or compile) script located on package.json to run on Build -->
<ShouldRunBuildScript>false</ShouldRunBuildScript>
<!-- Command to create an optimized build of the project that's ready for publishing -->
<ProductionBuildCommand>npm run build</ProductionBuildCommand>
<!-- Folder where production build objects will be placed --><BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
  </PropertyGroup>
</Project>

SERVER项目 #

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<InvariantGlobalization>true</InvariantGlobalization>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.0.0-preview.7.23375.9" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\vitetypescriptreact.client\vitetypescriptreact.client.esproj">
  <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
</ProjectReference>
</ItemGroup>

</Project>

我已通过Visual Studio提交反馈，并在官方公告文章下留言，后续会分享解决方案，请问有人能看出问题所在吗？

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