.NET Core WebAPI VueJS 模板发布问题

Question

我正在试用 "VueJS with Asp.Net Core 3.1 Web API Template" 发现的 here，它在开发过程中运行得非常顺利。但是，我想看看它是如何处理发布的，但我无法让它正常工作。

当运行发布到文件夹时，它不会将 clientapp/dist 文件夹移动到输出目录，这没问题，所以我想我会手动完成。所以我尝试将 dist 文件夹的内容移动到具有以下路径的输出目录：

"/发布/clientapp/dist"
"/publish/dist"
"/publish/clientapp"

但是上面的 none 似乎有效，当运行 .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，我试过了，但即便如此，我还是得到了上面提到的错误。

我希望有人能给我指出正确的方向 - 提前致谢:)

Answer 1

模板中似乎有错误：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核心Angular模板中复制过来的。发布后，它将在 clientapp/dist 文件夹下构建您的 Vuejs。为了让 ASP.NET Core 知道这一点，请按如下方式配置您的 SpaStaticFiles 服务：
```
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp";
    configuration.RootPath = "clientapp/dist";
}
```

最后，在生产环境中不需要源码路径，因为它已经自动构建了：

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

.NET Core WebAPI VueJS 模板发布问题

.NET Core WebAPI VueJS template publish issue

c#

asp.net-spa

asp.net-core