자신의 메모 대신에 한 일을 적어 둡니다.
거의 참고로 한 페이지 그대로입니다만, 그쪽에서는 MVC 프로젝트로 작성하고 있습니다만, 여기에서는 WebAPI 프로젝트로 작성하기 때문에 약간의 차이가 있습니다.

환경

Visual Studio 2019

.NET Core 3.1.1

vue cli 4.2.2

프로젝트 만들기

ASP.NET Core WebAPI 프로젝트 만들기

우선 인증 등은 아무것도 붙이지 않고 API 만

Vue.js 프로젝트 만들기

만든 프로젝트 폴더에서 다음 명령 실행

vue create client-app

default (babel, eslint) 선택

.NET Core 프로젝트 파일 편집

csproj 파일을 다음과 같이 편집

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

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <None Remove="client-app\**" />
    <Content Remove="client-app\**" />
    <None Include="client-app\**" Exclude="client-app\node_modules\**" />
  </ItemGroup>

  <Target Name="ExecNpmInstall" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug' And !Exists('client-app\node_modules')">
    <Exec WorkingDirectory="client-app\" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="client-app" Command="npm install" />
    <Exec WorkingDirectory="client-app" Command="npm run build" />

    <ItemGroup>
      <DistFiles Include="client-app\dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>

.NET Core 측 SPA용 Config 및 디버깅 코드 추가

SPA 용 패키지가 없으므로 nuget으로 다음 패키지를 설치하십시오.

Microsoft.AspNetCore.SpaServices.Extensions

ConfigureServices에 SPA에 대한 설명 추가

Startup.cs

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();

            // 追加
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = @"client-app/dist";
            });
        }

Configure에 SPA에 대한 설명 추가

Startup.cs

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });

            // 追加
            app.UseSpaStaticFiles();
            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "client-app";
                if (env.IsDevelopment())
                {
                    spa.UseProxyToSpaDevelopmentServer(async () =>
                    {
                        var pi = new ProcessStartInfo
                        {
                            FileName = RuntimeInformation.IsOSPlatform(OSPlatform.Windows) ? "cmd" : "npm",
                            Arguments = $"{(RuntimeInformation.IsOSPlatform(OSPlatform.Windows) ? "/c npm " : "")}run serve",
                            WorkingDirectory = "client-app",
                            RedirectStandardError = true,
                            RedirectStandardInput = true,
                            RedirectStandardOutput = true,
                            UseShellExecute = false,
                        };
                        var p = Process.Start(pi);
                        var lf = app.ApplicationServices.GetService<ILoggerFactory>();
                        var logger = lf.CreateLogger("npm");
                        var tcs = new TaskCompletionSource<int>();
                        _ = Task.Run(() =>
                        {
                            var line = "";
                            while ((line = p.StandardOutput.ReadLine()) != null)
                            {
                                if (line.Contains("DONE  Compiled successfully in "))
                                {
                                    tcs.SetResult(0);
                                }

                                logger.LogInformation(line);
                            }
                        });
                        _ = Task.Run(() =>
                        {
                            var line = "";
                            while ((line = p.StandardError.ReadLine()) != null)
                            {
                                logger.LogError(line);
                            }
                        });
                        await Task.WhenAny(Task.Delay(20000), tcs.Task);
                        return new Uri("http://localhost:8080");
                    });
                }
            });
        }

일단 여기까지 동작은 합니다만, 디폴트라고 디버그 실행했을 때에 WeatherForecast에 액세스 하게 되어 있기 때문에 프로젝트의 프로퍼티로 이하의 이미지의 ブラウザの起動 의 오른쪽에 있는 텍스트 박스를 비웁니다.

실행

디버깅을 실행하고 문제가 없으면 Vue.js 프로젝트 쪽 페이지가 열립니다.

참고