asp.netcore5和vue集成在一个站点

开发一个前后端分离的后台管理项目，前端用vue，后端的webapi，这样一般是两个站点，有没有办法把他们集成在一个站点里呢？

问了下度娘，还真可以。

1、安装Proggmatic.SpaServices.VueCli

install-package Proggmatic.SpaServices.VueCli

2、在webapi.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." />

    <!-- Or ensure npm is installed -->
    <Exec Command="npm --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="npm is required to build and run this project." />
    <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 build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

3、startup.cs

using Proggmatic.SpaServices.VueCli;                  //-- new addition --//


public void ConfigureServices(IServiceCollection services)
{
  // ... other .NET configuration skipped


  //-- new addition --//
  services.AddSpaStaticFiles(configuration =>
  {
    configuration.RootPath = "ClientApp/dist";
  });
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
  // ... other .NET configuration skipped here

  app.UseStaticFiles();

  app.UseSpaStaticFiles();                            //-- new addition --//
  
  // ... more default stuff

  app.UseEndpoints(routes =>
  {
      // you app routes...
  }


  //-- new addition --//
  app.UseSpa(spa =>
  {
    // spa.Options.SourcePath = "ClientApp";          // Optional. If this string is commented, "ClientApp" will be used
    // spa.Options.PackageManagerCommand = "yarn";    // Optional. If this string is commented, "npm" will be used. You may use yarn instead of npm.

    if (env.IsDevelopment())
    {
      spa.UseVueCliServer();
      
      // Or to build not by starting this application but manually uncomment next lines and comment line above
      // spa.ApplicationBuilder.UseFixSpaPathBaseBugMiddleware();     // Uncomment this, if you want to use non-root url for proxying (like http://localhost:8080/my-custom-path)
      // spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
    }
  });
}

4、在根目录新建ClientApp文件夹，这里面就是vue项目的东西