.NET Core WebAPI VueJS模板发布问题

debugcn 发表于 Dev

米克尔

我正在尝试在此处找到的“带有Asp.Net Core 3.1 Web API模板的VueJS” ，它在开发过程中工作非常顺利。但是，我想看看它如何处理发布，而且我无法使其正常运行。

运行“发布到文件夹”时，它不会将clientapp / dist文件夹移动到输出目录，这是可以的，所以我想我会手动进行。因此，我尝试使用以下路径将dist文件夹的内容移动到输出目录：

“ / publish / clientapp / dist”
“ / publish / dist”
“ / publish / clientapp”

但是以上似乎都不起作用，运行.dll文件时出现以下错误：

fail: Microsoft.AspNetCore.Server.Kestrel[13]
      Connection id "0HLTD93CRG52F", Request id "0HLTD93CRG52F:00000001": An unhandled exception was thrown by the application.
System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.
Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

   at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__1(HttpContext context, Func`1 next)
   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.TryServeStaticFile(HttpContext context, String contentType, PathString subPath)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_2.<Use>b__2()
   at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__0(HttpContext context, Func`1 next)
   at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)
   at Microsoft.AspNetCore.Routing.EndpointMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)

这是我在Startup.cs中的“ UseSpa”：

app.UseSpa(spa =>
        {
            if (env.IsDevelopment())
                spa.Options.SourcePath = "ClientApp";
            else
                spa.Options.SourcePath = "clientapp/dist";

            if (env.IsDevelopment())
            {
                spa.UseVueCli(npmScript: "serve");
            }

        });

使用上面的代码，我假设我的dist文件夹应该位于我尝试过的/ publish / clientapp / dist中，但是即使那样，我仍然遇到上述错误。

我希望有人可以指出正确的方向-预先感谢:)

负数

模板中似乎有一个错误：ClientApp文件夹的名称为clientapp。但是，启动时所有相关代码都将其视为ClientApp。

该模板未配置为您构建Vuejs的任务。为此，在csproj文件中添加一个任务：

  <PropertyGroup>
    <SpaRoot>clientapp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <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)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

上面的代码大部分是从标准ASP.NET Core Angular模板复制而来的。clientapp/dist发布后，它将在文件夹下构建Vuejs 。为了使ASP.NET Core知道这一点，请按以下方式配置SpaStaticFiles服务：

services.AddSpaStaticFiles（configuration => 
{ 
      
       
      configuration.RootPath =“ ClientApp”;
       
    configuration.RootPath =“ clientapp / dist”; 
}

最后，由于它是自动构建的，因此在生产环境中不需要源路径：

app.UseSpa（spa => 
{
    如果（env.IsDevelopment（））
      
       
      spa.Options.SourcePath =“ ClientApp”;
       
        spa.Options.SourcePath =“ clientapp”;
      
       
      否则
      
      
       
          spa.Options.SourcePath =“ dist”